Defining and Positioning Your Header Image with CSS in WordPress Twenty Fifteen - dummies

Defining and Positioning Your Header Image with CSS 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 custom header feature in WordPress.

Defining a background image to use as a header

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

In themes that don’t 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

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

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

#header {
background: url(/images/header-image.jpg) no-repeat;
width: 980px;
height: 100px;
}

The background value indicates a header-image.jpg image. For that image to appear on your site, you need to create the image and upload it to your web server in the /images/ directory.

When working with graphics on the web, you should use GIF, JPG, or PNG image formats. For images with a small number of colors (such as charts, line art, logos, and so on), GIF format works best. For other image types (screenshots with text and images, blended transparency, and so on), use JPG or PNG.

Positioning, repeating, or scrolling your background image

After you upload a graphic to use in your theme, you can use CSS background properties to position it. The main CSS properties — background-position, background-repeat, and background-attachment — help you achieve the desired effect. Check out the CSS background properties and their available values for changing them in your theme stylesheet.

Property Description Values Example
background-position Determines the starting point of your background image on your
web page
bottom center
bottom right
left center
right center
center center
background-position: bottom center;
background-repeat Determines whether your background image will repeat or
tile
repeat (repeats infinitely)
repeat-y (repeats vertically)
repeat-x (repeats horizontally)
no-repeat (does not repeat)
background-repeat: repeat-y;
background-attachment Determines whether your background image is fixed or scrolls
with the browser window
Fixed
scroll
background-attachment: scroll;

You can explore the positioning of the header graphic with some of the values provided above. If you’re a visual person, you’ll enjoy testing and tweaking values to see the effects on your site.

Say your goal is to tile, or repeat, the background image horizontally, or across the browser screen from left to right so that it scales with the width of the browser on any computer. You also want to change the background color to a different color (like white, as in the following sample). To achieve this, open the stylesheet again and change:

background: #f1f1f1;

to

background: #FFFFFF;
background-image: url(images/header-image.jpg);
background-repeat: repeat-x;

or you can use

background: #FFFFFF url(images/header-image.jpg) repeat-x;