Pages Navigation Menu

a pixelated personality

Background Change Upon Page URL

Background Change Upon Page URL

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:

Body Tag CSS ID for Post

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('') no-repeat center top;}

This website’s content area is already using CSS to set the Coffee Cup background.

Coffe 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:


Putting it altogether, adding the following css to my stylesheet gives this page its own unique background:

background-image: url(!important;
background-size: cover;
body.postid-1405 #content-area{

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
Wang Chung Chinese Philosopher

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

Leave a Comment

Your email address will not be published. Required fields are marked *