Define and Position a WordPress Header Image with CSS

Most themes have a header image that displays 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.

Defining a background image to use as a header

In the WordPress default Twenty Ten theme, including a custom header image on a site that uses the Twenty Ten theme is 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 display 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, GIF, JPG, or PNG image formats are recommended. 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. The table describes the CSS background properties and their available values for changing them in your theme stylesheet.

CSS Background Properties

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;

In the preceding section, the code example uploads a new background graphic named header-image.jpg. You can explore the positioning of this graphic with some of the values provided in the table. 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;

dummies

Source:http://www.dummies.com/how-to/content/define-and-position-a-wordpress-header-image-with-.html