[Resolved] Different Body Background for Individual Pages

[Roslyn]

I tried the following CSS solution, however it has not worked – I still get the same background image for all of my pages if I change it in customizer while on one of them.

body.page-id-xx {
background-image: url(http://IMAGE-URL-HERE);
}

Is there another way I’m supposed to do this?

[Leo]

Hi there,

Did you modify xx to the actual ID of the page you are trying to change?

Which page can I see the issue?

Let me know 🙂

[Roslyn]

Nope! Where do I find the ID of the page?

[Roslyn]

Just to be a little more specific, I would like to have a different background image for each of the 7 main pages found in my main menu in the header, and have all the background images for all the sub-pages I create match those of their parent page.

[Leo]

It’s in the URL when you are on the Edit page/post screen:
https://www.screencast.com/t/fZy970CpLBw

So if we use my screenshot as example, the code would be:

body.page-id-385 {
    background-image: url(http://IMAGE-URL-HERE);
}

Let me know 🙂

[Roslyn]

Thanks! Got it! This removed the background image from the page whose id I inserted (http://yooptopian.com/products/). So now my question is where to find the image url which I’m figuring also needs to replace the section that reads “IMAGE-URL-HERE.” I inserted what I found alongside the image in my media library, but this did not work.

[Leo]

Should be this one: https://www.screencast.com/t/UBrgr2HPiy9

[Roslyn]

Oh, hallelujah!!

Thank you!

[Leo]

No problem 🙂

[Author]

Posts