How to Define and Position a WordPress Header Image with CSS

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 custom header feature in WordPress.

How to define a background image to use as a header

In the WordPress default Twenty Thirteen theme, including a custom header image on a site that uses the Twenty Thirteen 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, it’s a good idea to 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.

How to position, repeat, or scroll 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.

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;

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;
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.