Background overlay in background - content

Hi there,

We would have to use CSS for that.

Which page are you referring to? Not seeing background image on the home page.

Let me know :)

Hello Leo.

I was considering the option but I did not find it, so in the end I did not fix the background.

If you have the css, I would like to have both options, how would it be for the all web? How would it be for specific web pages?

A greeting.

Which background are you referring to?

The body background?

Can you apply it so I can just give you the full code?

Hello Leo. Yes, I'm referring to body background.

Please look the website, I've changed it. I want body background with an overlay color.

Thanks.

Try this CSS:

body {
    background-image: linear-gradient(0deg,rgba(36,55,67,.76),rgba(36,55,67,.76)),url(https://cdn.shortpixel.ai/client/q_glossy,ret_img/http://www.historiadeloscomics.com/wp-content/uploads/2019/01/marvel-1641554_1920.jpg);
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know :)

Hello Leo. Thanks, that's I wanted.

Leo, is there a possibility that this will NOT apply to specific pages?

Maybe have the space to place the page-id where I do not want to have that change.

You can use the :not selector like this:

body:not(.page-id-123):not(.page-id-456) {
    background-image: linear-gradient(0deg,rgba(36,55,67,.76),rgba(36,55,67,.76)),url(https://cdn.shortpixel.ai/client/q_glossy,ret_img/http://www.historiadeloscomics.com/wp-content/uploads/2019/01/marvel-1641554_1920.jpg);
}

Just replace the 123 and 456 with the actual page ID that you would like to replace.

The other method would be to target specific page that you do want the background image/overlay:

body.page-id-123 ,body.page-id-456 {
    background-image: linear-gradient(0deg,rgba(36,55,67,.76),rgba(36,55,67,.76)),url(https://cdn.shortpixel.ai/client/q_glossy,ret_img/http://www.historiadeloscomics.com/wp-content/uploads/2019/01/marvel-1641554_1920.jpg);
}

Thank you Leo.

I can do it with your help.

No problem :)