Background Change Upon Page URL

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?!

Wang Chung Chinese Philosopher

You’re an IDIOT if you don’t use a child theme.