Add Or Change WordPress Header Image
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.
Similar Posts:
- Change WordPress Header Font Size And Color
- Edit Modify Or Change WordPress Links
- Add A Picture To Your WordPress Blog
- Adding and Changing WordPress Themes
- Change Color Of Links In A WordPress Theme
If you liked this post, feel free to leave a comment that is relevant to the post or subscribe to the feed and get future articles delivered to your feed reader.
Sorry but due to the spamming of a few all comments are moderated and will appear when approved and all drive-by comments will be deleted!
Comments
I have often wondered how I would be able to change this image. It is really great for you to explain it all to us, on behalf of the rest of the internet wordpress users I thank you.
Reply
This might be a wrong way to do so but I always follow that. i just replaced the original image with my own with the same name. Moreover I download that image and edit it to customize it. is it right way to do so?
Reply
Qaswer , yes you can do it that way but I suggest you rename the original image and not delete it.
Reply
Having too many blogs, themes and headers will make a mess altogether if someone will change headers and will not follow exact procedures. Although it will be very easy for time being but it will leave you in an awkward position later.
Reply
I got another post regarding this. It can be used to add image header to any wordpress theme. You won’t regret reading it.
http://opensourcethefuture.blog.co.in/2008/10/10/tweaking-your-blog/
Reply
Thanks for all this info. Just started out in the world of Wordpress – and blown away. Still, I cannot believe its such a pain in the ass changing the headers. Are there themes that have widgets that will let you upload a header image with 1 click???
Reply
I have often wondered how to do this. I always choose themes where there was no header image. I will give this tutorial a try and see how I get along. Thank you so much.
Reply
thanks for the tutorial. have to change the header this time.
Reply
Ok this seems fairly easy and makes sense. Do you create your wordpress headers in photoshop or a similar program? Is there anyone that will do a cheaper header design for me?
Reply
Jeff Replied:
November 30th, 2009 at 8:06 pm
Paul I use Paint Shop Pro but I really just copy and paste other already made images to create what is needed. If you want one made look on the right sidebar for my friend Yvonne at Nightingale Design.
Reply
I’m trying to take a pre-made template and replace the current picture with a different one. I was so happy to find these instructions and I was able to follow them – sort of. In the stylesheet I located the header image and replaced the current location with the location of the new image. However, it does not display on the website – the header just vanished completely.
I am very ignorant to this process, but wondered if it had anythin to do with the fact that my coding is written very differently than your sample above? Instead of
#header {
width: 100%;
height: 100%;
background: #FFF url (‘images/header_footer_img.jpg’) top center repeat-y;
}
my template contains this:
.main_table {
width:936px;
display:table;
background:url(images/top_bg.jpg) left top no-repeat;
}
The only way I was able to recognize it is that this does display the current header image.
Thanks in advance for any insight or direction you might be able to offer.
Reply
Jeff Replied:
January 21st, 2010 at 3:29 pm
Seems to be working now. Your code was missing a few characters and spaces. You needed to add a space after url and the apostrophes ‘ on the location/file name of the image.
Reply
Heather Replied:
January 21st, 2010 at 3:44 pm
I think maybe you saw the original while I was tinkering with it. The sunflower image is what I am trying to replace with a store logo. I added the space and apostrophes but the header is still MIA. (And I thought I was reasonably intelligent until I began working with Wordpress-clearly not my forte!)
Reply
Oh sorry, forgot to add that this is for a blog I am developing and the url is http://www.bellabuggy.com/blog
Thank you!
Reply
Thank you for the information on changing or adding an image on my wordpress header. I followed your directions and was successful!
Reply
I did it!
All I did was upload my header image, then I replaced the kubrick.jpg name with the name of my image, adjusted the width and height and voila.
Reply
The problem that I usually have is that I can’t remove the website name from on top of the image. Does anyone know how to do that.
Reply
Leave a comment
Drive-By comments will be deleted! Like "Thanks for sharing", "Nice post", or any other text that doesn't contribute to the discussion. If you ask a very specific question about your particular WordPress theme, it will probably be deleted. I can fix your WordPress site but for a price. If you ask a question like "Why don't my blog work right", it will be deleted. If you ask a question about your WordPress site without a leaving a link to it, it will be deleted. The point is to ask questions and or comment on the the actual content of the post, and to please use some common sense. All comments are moderated and will appear when approved. Thank you.