How to Use CSS to Add the Custom Background Feature to a WordPress Theme - dummies

How to Use CSS to Add the Custom Background Feature to a WordPress Theme

By Lisa Sabin-Wilson

The Twenty Thirteen WordPress theme is not packaged with an available feature in WordPress that allows you to change the background to a different color or use an image for your background. There is, however, a nifty feature you can add to your WordPress functions.php file to allow your theme to support the custom background feature, enabling you to change the background image and/or color for your site.

You can add the custom background feature to any theme with just one line of code. Follow these steps:

  1. From the Dashboard, choose Appearance→Editor.

    The Edit Themes page appears.

  2. Click the Theme Functions (functions.php) template on the right side of the page.

    The Theme Functions template opens in the text editor in the middle of the page.

  3. Add the following line of code to the Theme Functions template before the closing ?> tag:


    This line of code tells WordPress that your theme has added the custom background feature.

  4. Click the Save File button.

    The Theme Functions template is saved, along with your changes. The Background link now appears below the Appearance menu on your Dashboard.

Any theme that has the custom background feature allows you to change the background to a different color or use an image for it. To change the background for your website, follow these steps:

  1. Choose Appearance→Background.

    The Custom Background page loads on the Dashboard. By default, the background color is set to white.

  2. To change the background color, click the Select Color button and then type the hexadecimal color code in the Color text box and then skip to Step 4.

    If you don’t know what hex code you want to use, click the Select a Color button and then, in the color selector that appears, click a color. (Note that when you click the Select Color button, the text changes to Current Color.)


    A hexadecimal (or hex) code represents a certain color. Hex codes always start with a hash symbol (#) and have six letters and/or numbers to represent a particular color, such as #d5d6d7 (light gray).

  3. To use an image file for the background, upload an image from your computer:

    1. Click the Browse button in the Select Image section and then select a file from your computer.

    2. Click the Upload button.

      The Custom Background page refreshes and gives you several display options.

  4. Change the display options for your new background image:

    • Position: Select Left, Center, or Right to set the screen position of the background image on your website.

    • Repeat: Choose No Repeat, Tile, Tile Horizontally, or Tile Vertically in this drop-down list to set the image on your website.

    • Attachment: Select Scroll to set the background image to scroll down the page, or select Fixed to set the background image in a static position so that it doesn’t scroll down the page.

  5. Click the Save Changes button.

    Be sure to click the Save Changes button before navigating away from the Custom Background page; otherwise, your new settings aren’t saved.

Because all themes are not created equal, themes that don’t have the custom header and background features enabled make it a little more challenging to change these elements. Without these features, you have to make tweaks via the theme CSS (style.css).