• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

  • Change Post Background Color Based On Category
  • Change Background Image Based On Category

Background Image

Reader Interactions

Comments

  1. Andrea says

    April 27, 2014 at 4:40 am

    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

    Log in to Reply
    • Brad Dalton says

      April 27, 2014 at 2:00 pm

      An example is:

      background-image: url(images/bg.png);

      Where bg.png is the file name of the image in your child themes images folder.

      Log in to Reply
      • Andrea says

        April 28, 2014 at 12:51 am

        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

        Log in to Reply
        • Brad Dalton says

          April 28, 2014 at 1:33 am

          Your code won’t work.

          You need to see my reply to your last comment.

          Log in to Reply
          • Andrea says

            April 28, 2014 at 1:49 am

            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

          • Brad Dalton says

            April 28, 2014 at 2:14 am

            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. Sinoun says

    April 22, 2014 at 2:15 pm

    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.

    Log in to Reply
    • Brad Dalton says

      April 23, 2014 at 1:49 am

      Thanks for sharing Sinoun.

      You can also use

      .archive.category-1 { 
      background-image: url('YOUR-URL'); 
      }
      Log in to Reply
  3. Sinoun says

    April 20, 2014 at 9:13 pm

    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

    Log in to Reply
  4. Nanci Murdock says

    February 22, 2014 at 8:37 pm

    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!

    Log in to Reply
    • Brad Dalton says

      February 22, 2014 at 10:02 pm

      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.

      Log in to Reply
  5. Mark says

    January 29, 2014 at 8:12 am

    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.

    Log in to Reply
    • Brad Dalton says

      January 29, 2014 at 8:23 am

      You only need to use:

      .home {
      bacground-image: url (images/bg.png);
      }

      View to source code of the page to find the body class.

      For backstretch, you can paste the code in a home.php or front-page.php file or in your functions file with a conditional tag for the front page: is_home() or is_front_page().

      http://wpsites.net/web-design/display-agency-pro-background-image-only-on-front-page/

      Log in to Reply
      • Mark says

        January 29, 2014 at 4:47 pm

        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.

        Log in to Reply
        • Brad Dalton says

          January 29, 2014 at 6:28 pm

          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.

          Log in to Reply
          • Mark says

            January 29, 2014 at 7:31 pm

            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.

          • Brad Dalton says

            January 30, 2014 at 6:45 am

            No need to generate a custom body class.

          • Mark says

            January 29, 2014 at 8:07 pm

            Brad!….

            Gotcha…

            no php, just .home

            Everything working now.

            Thanks a bunch man!!

          • Brad Dalton says

            January 30, 2014 at 6:43 am

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

  6. Sheldon Hildebrand says

    January 3, 2014 at 4:53 pm

    Thanks for the clear, specific examples! Much appreciated!

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.