[Support request] How to disable background image on one page

[Fiona]

Hi,
I have a background image enabled throughout the site but I’d like to know how to disable it on one page only.

Thanks

http://www.amityhomemanagement.co.uk

[Elvin]

Hi,

Your page seems to have background images applied through Header Element and Backgrounds module on content.

To clarify: Which background-image on which page do you want to disable?

Let us know. 🙂

[Fiona]

Hi,
I wanted to remove the background image of diamonds on the Services page. Perhaps you could also explain why it shows through on the text boxes that are shaded grey but it doesn’t show through on the white ones? If it didn’t show through then I could just keep it as a background image but I don’t like it showing through where there is text. I hope that makes sense.
Thanks for you help.

[Fiona]

I’ve realised what I was doing wrong with the transparency, but it would be really useful to know if I can disable a background image on one page. Thanks Elvin

[Leo]

I assume you are referring to the body background here so to disable it for one page, you’d need CSS like this:

body.page-id-xxx {
    background-image: none;
}

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

And replace xxx with the actual ID of the page.

[Jason]

what about the background image for the header? I’ve been to disable it for a certain page, been trying for 2 hours now.

I tried your above css and it doesn’t work. as it is for the body, or just background image. i even disable the header inside my actual page, and it still shows. below is the URL, im trying to disable the header bg image for the shop

https://lazykoalasclub.com/shop

[Fernando]

Hi Jason,

For that page, try this CSS:

body.archive.woocommerce-shop.woocommerce.woocommerce-page header.site-header {
    background-image: none;
}

[Author]

Posts