Different Background Images on Different WordPress Pages

I was hunting for a way to change background images on different pages on a client’s WordPress site and finally found presseroo‘s post on WordPress.org the working simplicity on different background images for different pages. What follows is my adaptation of his technique. You can see it in action on this website.

  1. In your header.php file, change <body> to <body <?php body_class(); ?>>. If you have more than one header file, change it in all of them.
  2. Set up your default background image in your style.css file as usual.
  3. For each page that you want to have a different background image, find out the body class(es) by viewing the source of the page in your browser (View/Page Source in Firefox) and doing a search for “body”.  The classes assigned to body will vary depending on the type of page. For example:
    • A single page:
      <body class="page page-id-8 page-parent page-template page-template-default">
    • A home page with its own template file:
      <body class="home page page-id-23 page-template page-template-page-home-php">
    • Category page called “Recipes”:
      <body class="archive category category-recipes category-6">
    • Single post:
      <body class="single single-post postid-587 single-format-standard">
  4. Use these classes to specify which pages get different background images. Sometimes you will need multiple selectors to make sure each page or post in a section gets the same background image. You can also play around with the image positioning, and whether the image is fixed or scrolls with the content. Here are some CSS examples from the style.css style sheet:
    • Default body background:
      body {
      background:#yourcolor url(http://www.yoursite.com/wp-content/uploads/yourimage1.jpg) center top no-repeat fixed;}
    • Targeting a single page using the unique class for that specific page:
      body.page-id-14 {
      background:#yourcolor url(http://www.yoursite.com/wp-content/uploads/yourimage2.jpg) center top no-repeat fixed;}
    • Targeting the posts and archive pages of a specific category, in this case the blog:
      body.category-blog,
      body.blogbody {
      background:#yourcolor url(http://www.yoursite.com/wp-content/uploads/yourimage3.jpg) center top no-repeat fixed;}
    • Targeting all the various elements in a section:
      body.page-id-42,
      body.page-id-198,
      body.parent-pageid-198,
      body.page-id-202,
      body.category-recipes,
      body.single-post {
      background:#yourcolor url(http://www.yoursite.com/wp-content/uploads/yourimage4.jpg) center top no-repeat scroll;}

Experiment! There are lots of possibilities with this technique.

One downside of using large background images is the file size, and therefore download time, of the images. You have to walk a fine line between good image quality and optimal file size as you save the images for web use. Keeping background image size to 150kb or less seems to be a good practice, though I do not always follow it.

Good luck!


Return to Blog