How to Change Your WordPress Background Using CSS

By Lisa Sabin-Wilson

The <body> tag is simple HTML markup. Every WordPress theme has this tag, which defines the overall default content for each page of your website — the site’s body. In the Twenty Fourteen stylesheet (style.css), the background for the body is defined like this:

body {
 background: #f5f5f5;
}

The background for the <body> tag uses a hexadecimal color code of #f5f5f5 that gives the background a gray color. You can use a color or an image (or both) to style the background of your website:

  • Color: The W3Schools website has a great resource on hex codes and color names at http://w3schools.com/HTML/html_colornames.asp.

  • Image: You can easily use an image as a background for your site by uploading the image to the images folder in your theme directory. That value looks like background: url(images/yourimage.jpg). (Note: The url portion of this code automatically pulls in the URL of your blog, so you don’t have to change the url part to your URL.)

You can also use a combination of colors and images in your backgrounds.

In the case of some basic colors, you don’t have to use the hex code. For colors such as white, black, red, blue, and silver, you can just use their names — background-color: white, for example.

If you want to change the background color of your theme, follow these steps:

  1. On the WordPress Dashboard, click the Editor link on the Appearance menu.

    The Edit Themes page opens.

  2. From the Select Theme to Edit drop-down menu, choose the theme you want to change.

  3. Click the Stylesheet template link.

    The style.css template opens in the text editor on the left side of the Edit Themes page.

  4. Scroll down in the text editor until you find the CSS selector body.

    If you’re tweaking the default theme, this section is what you’re looking for:

    body {
    background: #f5f5f5;
    }

    If you’re tweaking a different template, the CSS selector body will look similar.

  5. Edit the background property’s values.

    For example, in the default template, if you want to change the background color to black, you can use one of the following:

    background: #000000;

    or

    background: black;
  6. Click the Update File button in the bottom-left corner of the page.

    Your changes are saved and applied to your theme.

  7. Visit your site in your web browser.

    The background color of your theme has changed.