I get this question asked so often and I keep deflecting it almost every time. Why? Because this is a can of worms that can get complicated and trying to explain it in a post, comment or email is difficult. All themes are coded similar, but different. See what I mean?

Alright I will try to explain and give an example…
First the easiest way to figure out if your theme has a header image is to use use Firefox as a browser and right click the header. If View Background Image is a choice on the menu choose it and look at the header and note the location of the image in your address bar. I use this method when looking at themes to see how easy a header can be added or changed.

Back in the WordPress dashboard, click Design or Presentation, then Theme Editor. Click the stylesheet on the right and look for the code specifying the header. It should look something like this:

#header {
width: 100%;
height: 100%;
background: #FFF url (’images/header_footer_img.jpg’) top center repeat-y;
}

This particular header is using a small repeated image that fills the space of the header area, using this code top center repeat-y. The height of the header at 100%, means that the blog name and description dictate how high it is. To specify the height change the value to pixels like 95px instead of 100%. You will need to experiment with the height. The width may need specified in pixels too of you need to. The background fill color is specified by the hex color code, #FFF (white) and the actual image location is in the parentheses. Most headers images are stored in the the themes images folder (as above) some may be different. You can use any URL in here you want to point to the location of the header image.

Next upload your new header image to the themes image folder. Fire up an FTP client or upload the image from your hosting accounts control panel. The actual location depends on where WordPress is installed and is something like this: yourwordpressdirectory/wp-content/themes/yourtheme/images.

After your theme is uploaded go back to the WordPress dashboard and specify the the exact name of the new header image in the stylesheet. In the case above the header image is called header_footer_img.jpg change this to the new files name and save changes. Now look at your blog and you may need to adjust the height, width and background color if needed.

What if no image is specified in the stylesheet? Just follow the instructions and add the code including the url location. You way need to adjust the size and other styles in the header for it to show properly.

This is a very general WordPress guide and meant as a starting point for you.  Other factors like removing the blog title and description may be something you want to do and additional css styles may need to be added to the stylesheet in order for your header to display properly. It can get very tricky at times. Be sure to backup any theme files before you edit them.  Another factor to consider is the size of the image you are trying to use, make sure it is the right size. You may need to resize it and that is another can of worms I can’t open right now.

Share This Gregarious FeedFlare

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Filed In: WordPress Guide //