How can I blur only the background image of a div block in Webflow without blurring the content inside it?

To blur only the background image of a div block in Webflow without affecting the content inside, you can use a combination of CSS filter properties and pseudo-elements. Here's how you can achieve this:

1. Add a div block to your Webflow project where you want to apply the blur effect.
2. Set the desired background image for the div block using the background-image property in the Style panel.
3. Apply a CSS class to the div block by selecting it and going to the Class field in the Style panel.
4. Open the custom code panel by clicking on the </> icon in the Navigator or pressing "Ctrl + E" (Windows) or "Cmd + E" (Mac).
5. In the Head Code section of the custom code panel, add the following CSS code:

```css

```

6. Close the custom code panel.
7. Go back to your Designer and select the same div block that you applied the CSS class to.
8. Enable the position property for the div block by selecting it and going to the Position field in the Style panel. Choose either "relative" or "absolute" depending on your layout needs.
9. Add the CSS class name ("blur-background" in this example) to the div block by entering it in the Class field of the Style panel.

Now, only the background image of the div block will be blurred, while the content inside will remain unaffected. The pseudo-element "::before" is used to create an overlay that inherits the background image. The "filter" property with the "blur" function is then applied to the pseudo-element to achieve the blur effect.

Feel free to adjust the "blur" intensity value to suit your preference. Additionally, you can modify other properties such as opacity or background-color of the pseudo-element to further customize the visual effect.