Background "blur effect"

ralf6606
15 Posts
ralf6606 posted this 11 February 2022
Ask a Question

Hi NP-Team...!

How can I apply the CSS blur effect to a background..???

.blur {
-webkit-filter: blur(2px);
filter: blur(2px);

}

Hi NP-Team...! How can I apply the CSS blur effect to a background..??? .blur { -webkit-filter: blur(2px); filter: blur(2px); }
Vote to pay developers attention to this features or issue.
4 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 11 February 2022

Hi Ralf,

Try to use the Custom CSS Class option for the desired element and add the correct CSS code under the Site Settings >> CSS tab.

...................................................
Sincerely,
Hella
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Ralf, Try to use the Custom CSS Class option for the desired element and add the correct CSS code under the Site Settings >> CSS tab. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
ralf6606
15 Posts
ralf6606 posted this 11 February 2022

Sorry, it does not work..
I can only apply the CSS-Effect on one site or on the block.
Then not only the background but the entire content is blurred - not just the background.

EXAMPLE

Sorry, it does not work.. I can only apply the CSS-Effect on one site or on the block. Then not only the background but the entire content is blurred - not just the background. [EXAMPLE][1] [1]: https://www.buschkamp.de/auto/
Support Team
Support Team posted this 14 February 2022

Hi Ralf,

The filter property defines visual effects to an element (often <img>). But the background image is not an element, this is the property of an element. So, the filter property is applied to the whole element no matter what is inside it. So, if you want to use exactly this way to add image blur, you should add a separate element like Shape or Group with bg image, stretch it inside the Block and add blur to this Group/Shape.
But you can apply a blur effect to the image in any graphic editor and upload a blurred image to the Nicepage.

Please let us know if you need our further assistance.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Ralf, The **filter** *property* defines visual effects to an element (often &lt;img>). But the **background image** is not an element, this is the *property* of an element. So, the filter property is applied to the whole element no matter what is inside it. So, if you want to use exactly this way to add image blur, you should add a separate element like Shape or Group with bg image, stretch it inside the Block and add blur to this Group/Shape. But you can apply a blur effect to the image in any graphic editor and upload a blurred image to the Nicepage. Please let us know if you need our further assistance. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
webxsite
167 Posts
webxsite posted this 26 September 2022

But you can apply a blur effect to the image in any graphic editor and
upload a blurred image to the Nicepage.

Please just add the option to blur the background image. Your customers are telling you what they want.

> But you can apply a blur effect to the image in any graphic editor and > upload a blurred image to the Nicepage. Please just add the option to blur the background image. Your customers are telling you what they want.
You must log in or register to leave comments