How To Change Your Blog’s Header Image

Most WordPress theme designers will include a header image that is used to summarize what your blog is about. More often than not the image used won’t actually match the topic of your blog and so you will want to change the header image. If you don’t know much about WordPress development or HTML/CSS for that matter this can be a very perplexing situation.

However, if you know where to look and have a great tutorial to go by you shouldn’t have any problem customizing your own blog’s header image. So let’s get down to it!

Since you are going to be changing your blog’s header image you are going to want to find a file named header.php inside of your theme’s directory. The header.php file is usually made up of the start of a web page and usually ends with the main navigation bar. Most designers follow a standard naming convention for the sake of simplicity and easier customization.

Inside of your blog’s header.php file look around for a DIV tag with the ID name of header.

<div id=”header”>

Normally inside of this DIV will be your blog’s header image along with main navigation. On my theme I used another DIV tag with the ID of logo.

<div id=”logo”>

Your blog’s theme may or may not have this. In any event you are going to want to be searching for the image you want to replace. This can be somewhat tricky as there are 2 ways to do this so I will do as best as I can to explain.

The first will be an image used within the source code itself. Right click on your header image and select Properties. If a window popups up with information about the picture such as the size and the URL we are good to go. If not, then keep reading as I will explain what you need to do. You should now have the properties of your blog’s header image up, go ahead and find out the image’s name. If you are using FireFox it will be listed under Image Properties under the Location: line. Scroll to the end of the line if you need to and you will find the name of your image. It will most likely look something like

http://yourdomainhere.com/images/nameofimage.jpg

The last part after the last / is the name of the image. Once you have that, go back into your source code and look around for that. Once you have found it just replace the name of that image with your own custom one. It is usually a good idea to keep the images the same size that way you don’t have to mess around with the styling to get things looking correct again. You can find the image’s size in the Properties window where we found the name of the image itself.

For those of you that weren’t able to get the name, this part is for you. Now, let me warn you this part is a little bit more advanced then the last part. So stick with me, I will try to make it as easy to understand as possible!

Inside of your theme’s directory should be a file named style.css or something very similar. We are going to have to mess around in this file to replace the header image in your blog. This code is going to look different than the normal source code of HTML. Look around inside of the style.css file and try to find something along the lines of some code like below.

#header {

background: #FFFFFF url(‘images/header-background.jpg’);

width: 700px;

height: 30px;

}

That is a very general overview, you may see something different. Most WordPress designers will name their images according to where they are placed. A quick CSS lesson is in order I believe…..

#header – The ID of the DIV

background: – What color and background image is being used for the background of the header DIV

width: – The width of the header DIV in pixels

height: – The height of the header DIV in pixels

Ok, so now that that is taken care of lets continue. We are going to be modifying the background code to change your blog’s header image. If you have already uploaded your picture into the same folder as all of your blog’s default images just replace the name of the current image with your own and you should be good to go. If you uploaded your image to a different directory you are going to have to do a little bit of experimenting to get it right. Keep in mind like I stated before that it is a good idea to keep the images the same size so that you don’t have to mess around with anymore code. Even having your image 1 pixel too wide could screw up your entire blog’s layout.

Now, I could have gone REALLY into detail with this post and explained everything a lot further but this is a very general overview. Honestly, not every designer will name their HTML elements the same so it is kind of hard to write a tutorial that is easy to follow. If you have any questions about trying to do this or you find that you are having trouble getting this to work, feel free to shoot me an email and I will do my best to help you.

Post requested by WordVixen