[Resolved] Background overlay in background – content

[Diego Fernando]

Hi.

I am currently using the background module. I was wondering if it is possible, as if it happens in the header module, if I can use an overlay color with background, which would be on the content.

Thanks

[Leo]

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 🙂

[Diego Fernando]

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.

[Leo]

Which background are you referring to?

The body background?

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

[Diego Fernando]

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.

[Leo]

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 🙂

[Diego Fernando]

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.

[Leo]

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

[Diego Fernando]

Thank you Leo.

I can do it with your help.

[Leo]

No problem 🙂

[Author]

Posts