How To Change Your WordPress Theme Background CSS

In response to the piece on How To Change , I received a request from Claudia Gillentine:

Thank you for the help on changing header images. Would you please do the same kind of help for changing the background colors? The simpler WordPress designs are wonderful for our small public library but they are so glaringly white. I really like your page with the soft grey. It is so easy on the eyes. Thank you so much for your beginner’s guide to 2.7 also–so well written and easy to follow.

So Claudia, here it is.

Changing your WordPress Theme background is simple, however, you need to modify your theme’s CSS code. The theme style is usually in a file called style.css.

If your style.css file on your web server has a file permission set to allow others to write (666 or 766), you can edit it in your WordPress administration by clicking the Appearance | Editor link (see Figure 1).

Figure 1: To Change a WordPress Theme background in WordPress Administration, Select the Appearance Editor
Figure 1:To Change a WordPress Theme background in WordPress Administration, Select Appearance Editor

If you see the Update File button (Figure 2) at the end of the editing box, you know you can change the file content. Continue with “Changing the Theme Background.”

Figure 2: The Update File button in your WordPress Editor means the file can be edited.
Figure 2: The Update File button in your WordPress Editor means the file can be edited.

If you see a sentence that says “You need to make this file writable before you can save your changes. See the Codex for more information.” or something similar, then it means your theme files are not set with write permissions. Click the link text “the Codex” for more information on changing the file permissions.

Or you can change the style.css file by downloading the file from your web server with an FTP program, editing it with an HTML-friendly text editor such as BBedit, CSSEdit or even Notepad and uploading the changed file back to your web server with your FTP program.

Note: Do Not edit your HTML and CSS files in any Microsoft editor except Notepad! They will add unexpected changes and can destroy your themes.

Changing the Theme Background

  1. If it is not already selected, select the stylesheet, usually style.css, from your Theme Files left in the right-hand column (Figure 3).
  2. Figure 3: Be sure you have selected the stylesheet from your Theme Files.
    Figure 3: Be sure you have selected the stylesheet from your Theme Files.
  3. Scroll down until you see the body selector and its properties. (Figure 4).
  4. Figure 4: Find the body selector and its properties
    Figure 4: Find the body selector and its properties
  5. What you want to change is background property value. If your WordPress theme simply assigns a background color value, then changing it is easy. The background property will look something like this:background: #4A79B5; ORbackground-color: #4A79B5What you want to change are the numbers and/or letters after the # sign (the value).
    See the underlined property in Figure 4.

    If your WordPress theme uses a background image to create the background, it include the URL of the background image and look something like this:

    background: #4A79B5 url(images/body-bg.jpg) repeat-x top left;

    Now you have to decide if you want to keep the background image. If you do want to keep the background image but change its color, you will need someone to change the actual image file in an image editing program like Photoshop. And that’s beyond a simple text tutorial like this one.

    Hey, wait a minute, Carolyn! The example in Figure 4 only has 3 letters after the # sign. Do I need 3 characters or 6 characters? Glad you asked that question. The HTML color codes are made up of 3 hexadecimal numbers. The hexadecimal numbers are composed of 2 characters, therefore, colors made up of duplicate characters can be abbreviated with just 3 characters. For example, the color white in HTML is #ffffff which can be abbreviated #fff and black is #000000 or #000 for short. To avoid confusing yourself, just use all 6 characters. It’s better coding practice anyway.

    Before you make a change in your stylesheet make note of your original color number. You’ll thank me later.

  6. Now simply change the HTML color code for your body background property.
  7. Uhm, okay, Carolyn, how do I know what color code I want? Another excellent question! There are a plethora of HTML or web color charts on the Internet. You can google HTML color chart or web color chart, but one of my favorites is the Sortable Color Name Chart. Keep in mind that you can’t actually control the exact color other people will see since all monitors show colors a little differently, however, these colors are ones that you can be fairly certain will be close to consistent across monitors.

  8. Once you have changed your HTML body background color, click Update File button (Figure 2). Once you have updated (i.e., saved) your file, you will see yellow band beneath Edit Themes that states File edited successfully (Figure 5).
  9. Figure 5: A yellow band beneath Edit Themes reading File edited successfully should appear..
    Figure 5: A yellow band beneath Edit Themes reading File edited successfully should appear..

But What If Your Want to Change the Background of Some Other Part of Your WordPress Theme?

Well, I can’t give you complete training in modifying your WordPress Theme or CSS in this simple post, but the technique will be the same. The key is figuring out what background you need to change. For example, on my site, the background for everything except the header is not quite white. If you look at the source code for my site, you will see a <div id=”wrapper”>. If I change the background CSS for the ID wrapper, which will be listed as #wrapper, I’ll be changing the background for everything inside that division that hasn’t been assigned a different background (which in my case are the header and footer divisions).

The trick is figuring out what background you want to change. Each theme is a little different.

If you aren’t certain what you need or want to change, you can always scroll through your style sheet and change each background color one at a time and see the results.

Remember, make a note of the original background color before making any changes!

Chances are good you’ll want to switch most of them back to the original color.┬áMake the changes one at a time and look at the results before changing another one. It’s sometimes surprising what a difference a single background change can make!

I hope this helps, Claudia and everyone else.

26 comments:

  1. Fantastic! Thank you so much for your prompt help. It was exactly what I needed to know in order to soften the all-white background.

    1. I changed Background to 9f0909 from fff, updated, it said in the yellow box it was successful, and then when I go to my site, the background of the body is white. The outside edges set in background are correct. Why doesn’t my webpage extend further out to the edges of the screen? I am really confused and ready to give up.

      1. Well, Jay, you have been successful in changing the background color of whatever CSS style you specified. I suspect you changed the Body background, which would explain why the edges of your theme are now the color you specified. But… you knew there was a but coming didn’t you? But there appears to be more “wrappers” around your content. In other words, there are more divisions and styles that wrap around the text and images inside. This is very common in modern themes. You have to look at all of the styles. The easiest way is to use one of the developer’s tools that modern growers either have built-in or have an add-on to display (Firefox uses add-ons; Chrome & Safari have built-ins; I believe the new IE has a built-in CSS display option as well.) Every theme is designed and developed different and the more complex the theme and theme options, the more containers or wrappers it will have.

        Here’s all of the wrappers for one of my site themes BEFORE I even get to the header:

        body class="blog custom responsive pagelines posts full_width ">
        div id="site" class="two-sidebar-right">
        div id="page" class="thepage">
        div class="page-canvas">
        header id="header" class="container-group">
        div class="outline">

        To change the background color before I even got to changing the header, I would need to change check the background styling of the “body” tag as well as the ids named “site”, “page” and “header.” Finally, the classes named “two-sidebar-right,” “thepage,” “container-group,” and class=”outline”.

        This is why I highly recommend to my students and clients to choose a theme that is “close enough” and allows them to do the core changes they need (and yes, I recommend the modern commercial themes from the folks listed on my site because they include administrative options for making these kinds of changes.)

        If, however, you are attempting to learn how to design your won WordPress themes, then you will want to start from scratch and check out all of the documentation at wordpress.org. I hope this helped you out.

  2. How can I change the background of the ‘leave a reply’ box? I see that yours is pink with white boxes. Ours is white with grey boxes. Any suggestions?

    Thanks, Gretchen

    1. Gretchen,

      My apologies for not getting back to you sooner. I was traveling when this came through and I got distracted and forgot to respond.

      To change the background of your ‘leave a reply’ box, you will need to change the style in your Theme style sheet. This is usually style.css in WordPress Themes. And usually you want to change the #commentform style background. It will look something like this:

      #commentform{
      background: #F0F0F0;
      margin: 12px 12px 20px 12px;
      padding:20px;
      border-top: #8CA4BE 1px dotted;
      border-bottom: #8CA4BE 1px dotted;
      }

      You can change the hex numbers (that is the #F0F0F0) after the background: attribute.

      If your Theme does not have an id or class called ‘commentform’, you need to find out what style is associated with the comment form in your Theme. This means looking at the template. Usually, in WordPress Themes, you will see a template labeled “comments.php.” Search in that template for text “Leave a Reply” (often this is wrapped in an h3 tag). Just above that you may see some php code that begins <?php if ('open' == $post->comment_status) : ? > And right before THAT code you should see a < div id= — this would be the name of the style for your comment form and what you need to change.

      I hope that helps and again my apology for not getting back to you sooner!

  3. this is really a great tutorial, i was looking something similar and hope it will serve my purpose. I am moving from blogger to wordpress and finding difficulty in terms of updating coding.

    But hope soon i will be able to fix everyrhing

  4. hi, thanks so much for the tutorial above. I have a further question on the same lines. I figured out how to change the color, but i want to change the background color to an imge that is on my desktop, a jpg file saved on my desktop. I havent been able to figure out where to upload the file to..i use wordpress, and tried putting it in to my media files, but that didnt help. and i have no clue of where the code has to be changed.
    Please help.
    Regards,
    R

    1. RS,
      Changing background images is a little more complex than changing the background color. You have to upload your image, usually to your themes directory, and then modify the body tag in your stylesheet with not only the path to the image file, but information about positioning. To help you out, I wrote a separate post with the steps that you can find here: http://carolynecooper.com/web-dev/how-to-change-your-wordpress-background-image.

      I hope this answers your question and helps you out.

      p.s. You can use the file your uploaded to your media directory but it requires a little more precision in the background URL attribute, particularly if you left your upload directory settings on default when you installed WordPress. By default, WordPress organizes your media uploads by year and month. Getting the path correct can be a real pain.

  5. Hi Carolyn;
    Your tutorial is the simplest and easiest I’ve seen yet.

    What I would like to do is change the entire background of all the images that appear on the page.

    The theme base isn’t something I need changing so much but all the image backgrounds and logo are what I would like to change. Is that possible?

    1. Joni, thanks for the kind words. Regarding changing the “the entire background of all the images that appear on the page”, I’m not exactly certain what you mean. I’ve created a special post to answer your question. You can find it by clicking here: How the Background Color of Images Can Be Changed

      I hope this helped answer your question. Please feel free to contact me if you need more help and thanks again for the kind words about my tutorial.

  6. Hi Carolyne,
    I explored in google for instructions on how to change the background color of my free wordpress theme. It is grey and I want to change it to white. It is only in your article that I could find a very exhaustive explanation. Kudos to you.
    But Carolyne,I followed everything you have said , yet the color would not change. I substituted Background#d9d9d9 with #ffffff and clicked “update file”. The yellow band appeared saying that “File edited successfully”. But the background color has not changed. What could I have possibly missed?

    1. Thanks for the kind words. I try to help.

      I think I see the problem by viewing your website link and if you are in a hurry, just skip to the bottom of this reply. But if you want to learn how to track down the problem, read on.

      Okay. There are some possibilities for why changing a background style doesn’t have any affect.

      1. You didn’t change the right style.
      2. The background is actually a graphic image.
      3. You didn’t change the style in the correct stylesheet.

      Let’s start backwards because the last one is the easiest to test.

      Some stylesheets either have a custom CSS file that overrides the default or call on a CSS file that is stored somewhere else (I know, weird and dumb, but you know how geeks are — they’ve got to show off how clever they are). Anyway, to make certain you are changing the correct stylesheet. If possible, make a backup of your stylesheet. (Actually, you should keep a backup of your theme on your own hard drive just to be safe.)

      1. Look again at your theme stylesheet in the Appearance Editor (the file name is style.css in most cases).

      2. Now look for your base body tag which will look something like this:
      body {
      If it has a background color, change it to something audacious like bright red. But before you do, make a note of the current color. If it doesn’t have a background color, let’s make one.
      body {background-color: #ff0000;}

      If you have a background graphic, your body tag will look something like this:
      body{
      background:#c35d8a url('img/header.png') repeat-x;

      You will want to hide that temporarily, by doing this:
      body{
      /*background:#c35d8a url('img/header.png') repeat-x;*/
      (This completely comments out the background.)

      Did that change the background? If yes, then you know you are changing the correct stylesheet. If not, then you know you need to hunt for a custom stylesheet. But before you do that, quickly restore your stylesheet to the way it was.

      To find out what stylesheets are being used by your theme, open a new browser tab or window and then select view source from your browser options (Safari: It’s under Develop >> Web Inspector; Chrome: It’s View >> Developer >> View Source; Firefox: It’s View >>Page Source; Internet Explorer: Sorry, dude, I can’t help you. I won’t have that browser on my machines.) You want to look at the top in the head section for things that say “stylesheet” like this:

      <link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/style.css?060410-205319" type="text/css" media="screen, projection" />
      <link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/custom/layout.css?062810-35811" type="text/css" media="screen, projection" />
      <!--[if lte IE 8]><link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/lib/css/ie.css?060410-205239" type="text/css" media="screen, projection" /><![endif]-->
      <link rel="stylesheet" href="http://carolynecooper.com/wp-content/themes/thesis_17/custom/custom.css?063010-15755" type="text/css" media="screen, projection" />

      In this example, I have 4 stylesheets loaded: style.css; layout.css which is in the /custom subdirectory; ie.css in the /lib/css subdirectory; and custom.css in the /custom subdirectory. Since custom.css is the last one loaded by the browser, it trumps all other styles. So if there is something in that custom.css that says my background-color is white, then I can make all the changes I want to style.css (the first stylesheet loaded) and it won’t have any affect.

      So now you have made certain you are working with the correct stylesheet, look at the actual source and make certain there isn’t a wrapper around your content. For example, if you View Source for this website you will see that immediately after the body tag, there are div tags before any content appears.

      <body class="custom cat_wp">
      <div id="container">
      <div id="page">

      So in my case, if I wanted to change the background, I might need to change the style for #container or #page.

      Check your source and see if your theme wraps all the content inside a container or wrapper tag.

      Here’s you’re problem, Sanjiv,
      you’re content is wrapped in a couple of styles.
      <body class=”hideHeaderMenu1″><a name=”top” rel=”nofollow”></a><a id=”skipToPosts” href=”#content” rel=”nofollow”>Skip to posts</a>
      <div class=”pageContainer”>

      Look first at the style .hidHeaderMenu1. According to Safari’s Web Inspector, it has the background style: background: white url(http://mediconweb.com/wp-content/themes/arjuna-x/images/pageBG.png) repeat-x 0px 0px; In other words, your theme uses a graphic background named pageBG.png. Just delete the url(http://mediconweb.com/wp-content/themes/arjuna-x/images/pageBG.png) repeat-x 0px 0px; bit and I bet that solves your problem.

      Let me know if you have any more questions. And thanks for stopping by.

  7. Hey Carolyn,
    I got it . Your 2nd suggestion worked and I got the white background, which i wanted.
    Thanks a million, ’cause I have been trying do this since quite some time.
    sanjiv.

  8. But What If Your Want to Change the Background of Some Other Part of Your WordPress Theme?

    This add on was so helpful, trawled through literally hundreds of tutes explaining just basic background change.

    Thought I was going mad!

    Many Thanks

  9. Carolyn, I just followed your advise to Sanjiv above. It worked a treat, thank you! Superbly explained, it must be if I could follow it! Regards, Ian.

    PS – please do let me know if you would like to do a guest blog!

    1. Ian, thanks so much for the kind words and the offer. I’m lost in a maze of home repairs and teaching a class online at the moment, but I hope to get back to you in September.

  10. But it’s not working for a theme that sets the background image with HTML that is hosted with wordpress. You only have access to changing the CSS using wordpress when not hosting wordpress oneself.

    1. I’m afraid you can’t do much with the themes on your WordPress.com account, particularly the free blogging accounts. This information is for a fully-hosted WordPress-based site. I will be posting a video shortly that explains the difference.

  11. Hi Carolyne!!!!
    I am finding it difficult to identify which color is exactly assigned to which part of the background. Its too cumbersome to do it with hit and trial method. Do you have any simple solution for it?

  12. Thank you very much for this article. I was making a small mistake (deleted the entire background line to delete the image instead of deleting the image portion and adding in the color) and didn’t figure it out after the first few articles I read, but you helped me out. I appreciate it!

  13. It’s a pity you don’t have a donate button! I’d certainly donate to
    this superb blog! I guess for now i’ll settle for bookmarking and adding your RSS feed to
    my Google account. I look forward to fresh updates and will talk about this site with my Facebook group.
    Talk soon!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>