How can I apply a Color Overlay to image background

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/

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?

Hi there,

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

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

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);
}