WP SITES

2899

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Changing Background Color of Specific Page, Post & Category

You can easily change the background color on a specific page, post, category or archive once you find the i.d for that page.

Another way is to use the built in Body Class in the Layout Options.

Update : Here’s a newer solution which makes it easier to change the background color on any page or post

You can use a hex color code and/or background image.

Body Class I.D Method

Right click the post or page and View Page Source code:

  1. Find the Body Class
  2. Copy the post id
  3. Create your CSS code

Body Class

.postid-36782 {
background: #000000
}

or

.postid-36782 {
background: url(images/blue-3.png);
}

Add the CSS code to the end of your child theme’s style.css file or go to Appearance > Edit CSS and add it there if you have one.

  1. In the first example, the css code will change the background of post with id = 36782 to the hex code color of #000000 which is black.
  2. In the second example, the css code adds a blur background image to the post with id 36782

Using Body Class I.D from Source Code

.postid-678 {
background: url(images/blue-3.png);
}

Using layout Settings Custom Body Class

  1. Add a name for your custom body class to the field in your layout settings
  2. Use the name in your CSS code added to your child themes style.css file

Custom Body Class

CSS Code

.frontpage {
background: url(images/blue-3.png);
}

Here i’ve uploaded an image named blue-3.png to my child themes images folder.

The result is exactly the same. Both methods require you to upload an image and add the CSS code to your child themes style.css file or Appearance > Edit CSS page.

Changing Background On Category Archive Pages

Find your category I.D and find the body class for the category as previously shown.

Body Class for Category

Create the CSS 

.category-18 {
background: url(images/blue-3.png);
}

Add the css code to your child themes style.css file.

Add Custom Body Class for Category

You can also add a Custom Body Class for categories using the category i.d and adding the following code to your child theme’s functions.php file:

/** Add custom body class for Category I.D */

add_filter( 'body_class', 'add_body_class' );
function add_body_class( $classes ) {
if ( is_category( '18' ))
$classes[] = 'custom-class';
return $classes;
}

Change Background Color of Content Area

To change the background of your content area only, you’ll need to find the i.d or body class and add the code to your child theme’s style.css file.

The code needs to include the .content selector otherwise the background color won’t be changed for the content area!!

Example:

/* Change Content Area Background Color – Custom Post Type Archive */

.post-type-archive-portfolio .content {
background-color: #f3f3f3;
}

/* Change Content Area Background Color Using Image */

.postid-12345 .content {
background: url(images/blue-3.png);
}

/* Change Content Area Background Color – Post or Page */

.postid-12365 .content {
background: #f5f5f5
}

Background Image Not Displaying

  • Clear your browser cache.
  • Check your code
  • Genesis theme owners always have the forum support to fix problems.

Related Code Snippets

Reader Interactions

Comments

  1. Firstly, thank you for the tutorial.
    I am using the Parallax Pro theme and wish to add custom background to individual ID pages.
    I am trying to add the following code:

    .page-id-539 {background: url(“/wp-content/uploads/2014/04/DSCF2289s.jpg”);}

    to the Parallax Pro Theme: Stylesheet (style.css)
    I have tried adding the code numerous way and places, but I am not sure what I am doing wrong.

    Can you please tell me where and what line do I add the code in the CSS.
    thank you really appreciate any help

      • Thanks
        Basically I add all background images to wp-content > themes > parallax pro > images folder.

        Do I still add the page-ID in front as I would just one individual page to display this background, not on all the pages.

        .page-id-532 {background-image: url(“wp-content/themes/parallax-pro/images/DSCF2219s.jpg”);
        }

        Do I then add this code at the end of style.css code?

        cheers

          • Ok. Sorry I am just a novice at this.

            background-image: url(“wp-content/themes/parallax-pro/images/DSCF2219s.jpg”);

            Does the code in the previous comment allow me to add a background to a specific page. And if not what code can?
            thanks

          • Andrea

            I don’t provide custom code on demand for free.

            This post provides working examples which you can modify to work with your own site.

  2. Just wanted to let everyone know that if the code above to change your category archive page doesn’t work for you, try the code below because it worked for me!

    .archive.category-1 { background: url(‘YOUR-URL’); }

    Just change “1” to your category number and “your-url” to your URL.

  3. Hi, thank you so much for writing this article so clearly, it really helps! I can’t figure out for the life of me why I can’t figure out how to customize the background of a category. I have 3 categories on my site that I’d like to change the background for. I inserted this code in the style.css:

    As you can see in my site here, it background doesn’t change for the category:

    Do you have any insight on what I’m doing wrong? Thank you so much for your help!

    Sinoun

  4. This was incredibly helpful. I have been using two different plugins to generate custom backgrounds on my posts and pages (each of them doesn’t work on one, one doesn’t repeat an image), but I could not for the life of me figure out how to add a custom background to a category archive – which is how I am displaying two portfolios of work.

    Thank you, thank you! Now I can delete all the plugins – start from scratch with the above, and give my client a clean and orderly custom background framework.

    Thanks,
    Nanci

    p.s. You should sell something (like Advanced Genesis Tutorial for people who know just enough to get themselves in trouble) I would buy it!

    • hahaha. Just enough to be dangerous!

      Thanks Nanci

      Was thinking about a premium forum which provides full customization including code snippets but maybe a eBook might work better.

  5. Hey Brad,

    Great stuff on your site. I’ve just gone through over 70 pages to find this but how can I apply it to the home page? I want a background image on the home page but not the rest of the site.

    The body class on the home page is as follows…

    body class=”home blog logged-in admin-bar no-customize-support custom-header header-image header-full-width full-width-content executive-pro-home”

    So I added this to my css (tried with both body.”class here” and what you see below)

    .home blog logged-in admin-bar no-customize-support custom-header header-image header-full-width full-width-content executive-pro-home{
    background-image: url(http://www.mysite.com/images/my-image.jpg)
    }

    What am I missing?

    Also…is there something I should keep in mind or do differently if I want to apply Backstretch to the image whether it be manually or the plug-in?

    I really appreciate your time Brad, I know it’s valuable.

      • Thanks for the quick reply Brad,

        Your answer was my original resolution but it didn’t work.

        I’m using the executive-pro theme from Studiopress and the class I entered above IS from the source code of the home page. I don’t see a body class designation within it as in your example on “Styling Specific Page With Custom Body Class” article where you highlight “demo-class”.

        Any ideas why Executive pro doesn’t have the body class designation? Any other thoughts on how to accomplish this.

        I really appreciate your help.

        • This is what i tested and it works perfectly:
          [css]
          .home {
          background-image: url(‘http://www.example.dev/wp-content/uploads/2014/01/Elegant_Background-14.jpg’);
          }
          [/css]

          Maybe the path to the image isn’t working however you can use either the full url or path to your images folder.

          • Thanks again Brad,

            I think I got a little ahead of myself,

            Just to be clear….

            I’m supposed to…

            1) Add the following to functions.php replacing the ID and Class with the appropriate info

            function wpsites_specific_page_body_class($classes) {
if(is_page('007') ) {
$classes[] = 'demo-class';
return $classes;
}
}

            2) Add the following to the Stylesheet…
            [css]
            .home {
            background-image: url(‘images/bg.jpg’);
            }
            [/css]

            Do I add “home” as the class in the php code? and what do I put for the ID?

            Hope I’m not asking too much. Thanks a bunch Brad.

          • Not sure why the custom body class didn’t work but .home worked for me when i tested it.

Leave a Reply