How to Change the Background with CSS in WordPress Twenty Fifteen - dummies

How to Change the Background with CSS in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

You can change your background in WordPress using CSS. 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 Twenty Fifteen stylesheet (style.css), the background for the body is defined like this:

body {
background-color: #fff;

The background for the <body> tag uses a hexadecimal color code of #fff that gives the background a white 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.

  • 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 website, so you just need to leave the url text as is.)

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. In 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:before {
    background-color: #fff;

    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-color: #000000;


    background-color: 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.