How to Use CSS to Change a WordPress Theme Background - dummies

How to Use CSS to Change a WordPress Theme Background

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 stylesheet (style.css), the background for the body is defined like this:

body {
 background: #f1f1f1;
}

The background for the <body> tag uses a hexadecimal color code of #f1f1f1, which gives the background a light gray color.

You can use a color or an image to style the background of your website. You can also use a combination of colors and images in your backgrounds.

How to use an image as the site’s background

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 this:

background: url(images/yourimage.jpg)

The url portion of this code automatically pulls in the URL of your site, so you don’t have to change the url part to your URL.

How to change the background color

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

  1. On the WordPress Dashboard, choose Appearance→Editor.

    The Edit Themes page opens.

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

  3. Click the Stylesheet link in the list of templates.

    The style.css template opens in the text editor in the middle 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 is what you’re looking for:

    body {
     background: #f1f1f1;
    }

    If you’re tweaking a different template, the CSS selector body looks 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 enter either

    background: #000000;

    or

    background: black;

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

  6. Click the Update File button near the bottom 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.