Codeable info

Adding A Different Background Image To WordPress Pages

Posted on by in WordPress Tutorials

While working on my personal blog I decided that I wanted to use a different background image for a specific WordPress page. However while surfing around the net I found no definitive guide for doing so, which alternatively led me to putting together a bit of code on my own.

The process for implementing a custom background image for alternate WordPress pages involves editing your active theme’s “style.css” source file, so I would recommend backing this file up before any changes are made.

Where To Begin

You need one of two things before implementing a custom background, the individual page id of the page being altered and the image url of the image being implemented. In order to get the page id you need to create the page first (if it isn’t already created) and then open the page in a standard web browser. Using your individual browser settings select the “view source” option which will allow you to view the html source of the current page. You must then scroll down to the opening “body” tag whereupon you will find your specific page id.

The tag should look something like this:

<body class="page page-id-467 page-template page-template-footerRIFT-php logged-in admin-bar">

The page id is obviously listed after the section of code labeled “page-id” and the specific identification usually corresponds to a number. In the case above the page id would be “467”.

After you have successfully recorded the page id you must then upload the background image you wish to use for your site and collect the image URL or web address.

Once you have both the page id and image URL recorded you may then move on.

Implementing The Background Image

In order to implement the new background image you will need to open the “style.css” file (located in your active theme folder) in the editor of your choice. Scroll down to the following bit of code:

body {
  text-align: center;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: trebuchet ms, arial, helvetica, sans-serif;
  background: #000 url(images/bgbody.jpg) top center no-repeat;
  color: #eee;
}

The code in your individual “style.css” file may or may not resemble the code above, so basically what you’re looking for is the body tag under the “/Defaults/” section of your file (should be somewhere near the top).

After you’ve found the code above you need to start a new line below and input the following code:

.page-id-PAGENUMBERHERE {
background: #000000 url(IMAGE URL HERE);background-repeat:no-repeat; background-position:top center;
}

Add your specific page id you recorded earlier into the “PAGENUMBERHERE” section and also input the image URL of the background image you wish to use in the “IMAGE URL HERE” section. Make sure to save the file after editing and go check it out.

If you would like to customize further, you can change the background color which appears below the image by changing the html color code listed after the “background:” tag. Also by default the background image of any page is set to repeat, but I have added code so that it doesn’t. If you would like to turn the repeat feature on simply remove the “;background-repeat:no-repeat; background-position:top center;” section of the code.

Once the file has been saved and customized to your liking you should have a fully working custom background system for your individual WordPress pages. If you would like to add additional page backgrounds simply implement another section of the code above with the page-id of the alternate page and URL of the image of the new background.

Enjoy!

In the images below you will notice my main background image and the new background image on the different WordPress page I have created.

)
Codeable info

Comments (5)

Comment by Bek @ Crave says:

I can’t find my stylesheet file?!

Comment by puzzledkitty says:

Hi Briley,
I tried this and it didn’t work for me. Can I have a little help?

Comment by cat2012 says:

Your briliant Briley!
Thanx  !

Comment by Stuart says:

could this be applied to multiple pages?

I used the above and it woked like a charm. I would like to apply it to several pages. I tried page-id-1046,1047… and that did not work. Do I need to enter this style for each page? Or is it a ; instead of a comma?

Thanks.

Comment by Christa says:

Do you know how to make a “clickable” link to a background image along with this process?

Codeable info