Use CSS to Change a WordPress Theme Background

By Lisa Sabin-Wilson from WordPress Web Design For Dummies

Every WordPress theme uses CSS. You can use the <body> tag in a Header template to change the background color or image of your website. The <body> tag is simple HTML markup. Every 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.

Using 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.

Changing the site’s background color

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

In the WordPress Dashboard, choose Appearance→Editor.

The Edit Themes page opens.
From the Select Theme to Edit drop-down list, choose the theme you want to change.
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.
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: #f1f1f1;
}
```
If you’re tweaking a different template, the CSS selector body looks similar.
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.

The W3Schools website has a great resource on hex codes.

Click the Update File button near the bottom of the page.

Your changes are saved and applied to your theme.
Visit your site in your web browser.

The background color of your theme has changed.