Expertise:
Using simple css code on a page we can force that page to display a custom background of our choosing. On any WordPress website, every page has a CSS ID set on the Body tag. Looking at the page source the opening body tag looks like this for this page:
I can add css to the theme’s style.css to tell this specific page to use a custom background for the ‘body’. Something like this:
body#postid-1405{background-image: url('https://flashalexander.com/wp-content/uploads/2012/01/Balloon-through-the-Clouds.jpg') no-repeat center top;}
This website’s content area is already using CSS to set the Coffee Cup background.
ERGO, if I am going to set a custom background for the page I’ll have to hide the content area background that is laying on top of the page. I use this css to accomplish the task:
#content-area{background:transparent;}
Putting it altogether, adding the following css to my stylesheet gives this page its own unique background:
body.postid-1405{
background-image: url(https://flashalexander.com/wp-content/uploads/2012/01/Balloon-through-the-Clouds.jpg)!important;
background-size: cover;
}
body.postid-1405 #content-area{
background:transparent!important;
}
Take note of this: !important – It forces my css to override the existing css 🙂
All this assumes your using a child theme, where edits to the style.css file won’t be overwritten when the theme is updated. You ARE using a child theme aren’t you?!