[Support request] How can I apply a Color Overlay to image background

[Nguyen]

Hi,

First question:

I want to apply a color overlay on background image for all my site. How can I do that?

For now it’s either background image or background color.

Second:
Can I apply one image for all background sections? Like header, body, and all, not just Body and Header separately.

[Fernando]

Hi Nguyen,

1. For GB Container Blocks, you can add a Background color, and set a lower value for the opacity to set this. It’s not ideal to do this globally through custom code I believe. It can only work if you’re sure that no Container Block will be using the :before pseudo element.

If you’re referring to backgrounds set through the customizer, we can do it through custom CSS – targeting each element one by one.

2. Yes, you may. You can do this through Appearance > Customize > Background Images. Reference: https://docs.generatepress.com/article/backgrounds-overview/

[Nguyen]

2. I mean, apply one image through all the section, like it extend itself to all the background of the whole website. Not set every section repeatedly

And a follow up question please:

Can I add a blur overlay?

[David]

Hi there,

is this image to sit on the Body of your site ?

[Nguyen]

Yea I’m planning to do so. Can I create a blurry overlay to the background image with GeneratePress?

[David]

1. Activate the Backgrounds module in Appearance > GeneratePress
2. Customizer > Backgrounds and set the Body background image.
3. Add this to make it blurred:

body {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

[Author]

Posts