Tagged: background, blur, color section, image
Hello, I’m a new customer.
In a color section, if I insert a background image, this remains NOT blurred. I would like the background images to be blurred like in the demo (Enfold 2017). How can I do?
Hey dannat,
I think by blur you mean overlay? If so then please try to activate that in the Section Background Overlay tab in the Color Section element options.
Best regards,
Rikard
Hi there!
I was actually looking how to blur the color-section > background image (as i would like to show a low-res picture thats not pixeled).
With custom css and filter: blur(8px); it blurred the whole content…
Is there a way?
Thanks a lot!
Hi XV,
I don’t think that is possible unfortunately, since it will blur all of the content as you mentioned. Maybe you could try editing the image in Photoshop then upload it again?
Best regards,
Rikard
Does your background-image scroll or is it set to fixed?
(Edit : i ask – because there will be a solution if it is set to scroll.)
_____
But however it will be easier to blur it in a graphic programm and upload that blurred image.
Ok found a solution:
The point was not to load another picture or high-resolution background or to add extra images, now it load an already cashed image from a previous page and just blurs it.
– If you set the background to parallax it gets a class (av-parallax-inner)
(then added a custom css (blog-background) to the color-section)
and added the css :)
.blog-background .av-parallax-inner {
filter: blur(15px);
width: 110%;
height: 110%;
left: -5%;
top: -5%;
}