Frequently Asked Questions:

How do I change the background color of my blog’s body?

I get asked a lot how to change the background color of the blog’s body.  So often in fact, that in the next minor release I’m going to feature this CSS rule much more prominently in the simple edits area and in the tutorials.  But for now, I’ll address it here and point people to this post.

If you want to change the background of the body portion of your blog, say you want to turn it black, like Frank’s blog, open up your Theme Editor under the “Design” tab (”Presentation in WP 2.3.3 and earlier) of your WP Admin area. Click to edit the “Stylesheet (style.css).”  

Scroll down to line 153 where you will see this:

#wrapper {
 width: 980px;
 margin: 0 auto;
 background-color: #FFF;
}

Just change “#FFF;” to the six-digit color code of your choice, and you’re all set.

Furthermore, if you wanted to change just the background of the header area next to the logo to be something unique and different by itself, scroll down just a bit further and look for this bit of code:

#header {
 height: 108px;
}

Between the two brackets add a line to specify a background color of your choice, like so:

#header {
 height: 108px;
  background: #000000;
}

Click to update your changes and you should be golden.

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

4 Responses to “How do I change the background color of my blog’s body?”

  1. On Nadia said:

    How do you change the color where the logo is supposed to go? I do not have a logo right now and I just want it blank, but NOT white.

    Thanks,
    Nadia

  2. On admin said:

    @Nadia: just upload an image of the right dimensions that is blank, and of the color you want it to be.

    if you want to change the color of the header area try this post:
    http://www.professionalphotographertheme.com/tips/faq-can-i-change-the-background-color-of-just-the-top-header-area/

  3. On Kara said:

    Hi There. I’ve changed the background color of text body area but I was wondering if there was a way to make the color ’semi transparent’? I have a textured background image in the very background and would like a semi-transparent dark text background, so my image background could be seen behind. If this can’t be done, can an image be used as a background for the text section, rather than just changing the color of the text section. If so, I could whip one up and just put that in behind my text.
    Thanks!
    Kara

  4. On Jared said:

    @Kara: this is sort of a complex answer, but here goes. you can create semi-transparent backgrounds by using tiling semi-transparent .png image files as your background with no background color set. the problem is, it doesn’t work for Internet Explorer 6, which unfortunately is still widely used. there is a hack to force transparent .png files to work in IE6, but it’s too complex for you to get working by yourself.

    so, it would be easier to just put a background image in the body of your blog. to do this, first use FTP to upload an image into your “prophoto/images” folder. let’s pretend you name your image “bodybg.jpg”.

    then, open your style.css (stylesheet), and look for about line 153, which says this:

    #wrapper {
    width: 980px;
    margin: 0 auto;
    background-color: #FFF;
    }

    change it to this:

    #wrapper {
    width: 980px;
    margin: 0 auto;
    background: url(images/bodybg.jpg);
    }

    That should do it.

Leave a Reply