Archived topic
How can I put a background on some pages but not others?
5 replies · Started by Anonymous on November 13, 2014
I tried setting the background to "local" but that didn't work. I only want the background on certain pages.
Also, is there a way to get the background to stretch to fit the height of the page instead of repeating? Thanks!
Hi there,
At this point there's no option to set background images for specific pages - but it is planned in a future version of the Backgrounds add-on, or in a new landing page addon (haven't decided yet).
For now, you would have to use CSS to apply the background images to specific pages - it's not super hard, so if you'd like instructions on doing that, let me know.
As for your second question - if you choose the "Cover" option under "Size" - the image should stretch to fit the height of the page.
Let me know :)
Yes, please, the CSS would be very much appreciated!
Hi Rebecca,
So, each page in WordPress in given a unique class name in the <body> element.
You can find this class by using Google Chrome, right clicking your website, and clicking "Inspect Element".
Near the top, you'll see: <body class="....
In there, you'll find the unique class for that page, which will look something like: page-id-2
"2" will be replaced by the unique ID of that page.
So, in your CSS, you'll do this:
.page-id-2 {
background-image: url('URL TO YOUR IMAGE');
background-size: cover;
}And that should do it :)
Thanks! What would I put to set the background size to 100% width?
The background-size: cover; part will make it 100% width and height.
You can also do this:
background-size: 100% auto;
Which would be 100% width, and then let the height figure itself out.
