Changing the Header Image

Posted by Brandon on October 6, 2008

There are three options for changing the header image…

1. Create a graphic at least 960 pixels wide and 140 pixels high, name it header-bg.jpg and upload it to the /images folder of the theme and it will replace the green background.

2. Upload an image at least 960 x 140 and in the stylesheet (style.css), find the line that begins with #header and you’ll see the line background: url(images/header-bg.jpg);. Change the file name or include an exact url.

3. To make the entire header a clickable graphic… in the file header.php, locate the section marked with

<div id=”header”>

and ending with

</div>

Leave those alone, but delete everything in between them and then insert this code…

<a href=”<?php bloginfo(’url’); ?>” id=”title”><img src=”http://www.yourdomain.com/pathtoyourimage.jpg” alt=”<?php bloginfo(’name’); ?>: <?php bloginfo(’description’); ?>” title=”<?php bloginfo(’name’); ?> Home” /></a>

Make sure your image is exactly 960 x 140.

Is it taller or shorter? Then back in the style.css file, find #header and adjust the height: 140px; to the number of pixels high. I’d highly recommend the 960 wide image though, to save a whole lot of trouble.