How to Upload Header Images in Twenty Fourteen WordPress Themes

By Lisa Sabin-Wilson

Most WordPress themes have a header image that appears at the top of the page. 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 Fourteen theme, all the hard work’s been done for you

Including a custom header image on a blog that uses the Twenty Fourteen 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 Browse button under the Upload Image title. Select the image from your computer and then click Open.

  2. Click Upload.

    Your image uploads to your web server. The Crop Header 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 and Publish 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.

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

image0.jpg

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

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