How to Use Your Own Header Image in WordPress Twenty Fifteen

By Lisa Sabin-Wilson

Most themes have a header image that appears at the top of the page. In WordPress, this image is generated by a graphic defined either in the CSS value for the property that represents the header area, or through the use of a feature in WordPress called a custom header.

In the WordPress default Twenty Fifteen theme, all the hard work’s been done for you. Including a custom header image on a blog that uses the Twenty Fifteen theme is pretty darn easy.

To upload a new header image, click the Header link in the Appearances menu in your Dashboard, and follow these steps:

  1. Click the Add New Image button under the Header Image title.

    Select the image from the WordPress Media Library, or upload an image from your computer and then click Open.

  2. Click Select and Crop.

    The Crop Image page appears, where you can crop the image and adjust which portion of the header image you would like displayed.

  3. Click the Crop Image button.

    The Header Image page appears, and your new header image is now displayed.

  4. View your website.

    Your new header image appears at the top of your website.

    Adjust the dotted lines to choose the area of the image to display.

    Adjust the dotted lines to choose the area of the image to display.

In themes that do not have the custom header image feature, you can easily define a background image for the header image using CSS.

For purposes of this example, the HTML markup for the header in the template is this:

<header id=“site-header”></div>

In the CSS (style.css) file, you can use a background image by defining it in the CSS properties for #site-header. Use this code:

#site-header {
background: url(/images/header-image.jpg) no-repeat;
max-width: 100%;
height: auto;
}

The background value indicates an image called header-image.jpg. For it to display on your site, you need to create the image and upload it to your web server under /wp-content/theme-name/images/.