How to Create a Custom Background in Twenty Fourteen WordPress

By Lisa Sabin-Wilson

The Twenty Fourteen WordPress theme is packaged with the option to change the background to a different color or use an image for your background. To use the nifty, built-in custom background feature to change the Twenty Fourteen background for your blog, follow these steps:

  1. Click the Background link under the Appearance menu.

    The Custom Background page loads on the Dashboard.

  2. Click the Select Color to change the background color.

    You can enter a hex color code in the text box provided.

    If you don’t know what hex color code you want to use, click the Select a Color link and click a color within the provided color picker. The color selected is #f5f5f5, which is gray.

    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; for example, the code #d5d6d7 represents the color gray in hexadecimal code.

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

    Click the Browse button under Choose an Image from Your Computer and select a file from your computer. Then click the Upload button.

  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: Select No Repeat, Tile, Tile Horizontally, or Tile Vertically in the drop-down menu to set the image repeat behavior of the background 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).

      image0.jpg

  5. Save your changes.

    Be sure to click the Save Changes button before navigating away from the Custom Background page. Otherwise your new settings won’t be saved.

If you do not see the Background link under the Appearances menu in the Dashboard, that means that the theme you are using does not currently support custom backgrounds (note that the default theme, Twenty Fourteen, does) you can add support for the Custom Background feature to any theme with just a few lines of code.

Just follow these steps:

  1. Browse to the Edit Themes page and click the Theme Functions (functions.php) template.

    The Theme Functions template opens in the text editor on the left side of the page.

  2. Add the following line of code to the Theme Functions template somewhere after the line that says <?php:

    add_custom_background();

    This line of code tells WordPress that your theme has added the Custom Background feature.

  3. Click the Update File button.

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

  4. View your website page to see your changes.