CSS Filter Saturation

How To
1

Hello there.

So, I have a Section with a Container (with some elements). The Section has a background image. I’m trying to use de CSS Filter Saturation just in the section’s background image. What is happening is that the entire page is getting desaturated. Any tips?

https://www.awesomescreenshot.com/video/18709487?key=57ab7abc9cc4161893752bf849372a47

Best regards,

2

Hey @ribeirom4e,

unfortunately there is no “native” way in CSS to add a filter to a background image.

I would recommend you to use a real image instead of a background image (which has other advantages as well) and apply the filter to this real image.

I created a small screencast to demonstrate.

Best,

André

3

Hello André,

Thank you very much for your time and explanation!

I’ll do it like that. I was using Elementor and it has this function, so I was a little frustraded trying to make it work in Bricks (two days using Bricks, I don’t want to use Elementor anymore). Bricks is not so intuitive, but I’m liking it.

Hope in a near future some functions become more intuitive to the common plebe. :]

Best regards,

4

Your solution worked, but now I have a different problem.

I have a transparent header, with negative bottom margin. Even playing with z-index, when I use the negative bottom margin into your image solution, I can’t click the menu. Check below.

https://www.awesomescreenshot.com/video/18742184

Best regards,

5

Hey @ribeirom4e,

I am not able to open the video link unfortunately. It says “Invalid share key”.

Best,

André

6

Sorry, check this one:

https://www.awesomescreenshot.com/video/18742184?key=1695de55dd98666901f1a6cdbabe34d8

Best regards,

7

Just to let you know, if someone pass through this post, you need to setup the header as Position Absolute.

Best regards,