Background Image Per Page

Hi @@balladofjameslawless, to have a different background on each page, what you will need is to pull the unique page id CSS class for each page from the opening body html tag and use that to specifically target the page. You can find this using the web inspector built into your browser. Since you didn’t give a link to your site, I’ve gone off the About Page on the Karuna Demo Site at WordPress.com. This is an example for that particular page.

body.page-id-159 {
background: url('URL_OF_IMAGE') no-repeat scroll center top / contain;
}

For your site, substitute the unique page id CSS class for each into the above and replace URL_OF_IMAGE between the quote marks with the url of the image you upload to your media library.

Worked great! Would you happen to know how to change the background color as well? It only shows up when you scroll a bit to far up or down on the site, but for some reason changing the image just changed the color back to white.

You can add a background color declaration to the codes you have created for the individual page background images, so that it would look something like this.

body.page-id-159 {
   background: url('URL_OF_IMAGE') no-repeat scroll center top / contain;
   background-color: #cc0000;
}

This doesn’t work in WP 2017 Theme. I can get a single background image by using
.site-content {} — but I would like to have a different image for every page.
Any suggestions?

Hi @throwstones, CSS is theme specific, and the above code was for the particular page that the original posted wanted to change. That page id will be different on every site, so you will have to use the web inspector built into your browser to find the relevant CSS for Twenty Seventeen.

This is the Karuna support forum. For Twenty Seventeen, please post in its support forum at: https://www.ads-software.com/support/theme/twentyseventeen

Oops – apologies. I didn’t notice the conversation being theme specific.
Thanks.
TSM

No worries. ??