Replacing header text with an image
I get asked quite a lot about how to replace a text header with an image. Now there’s an easy way, which is to edit header.php, find the template tag inside the <h1></h1> header tags, remove it and replace it with an <img> tag. But that’s a bad idea.
Screen readers and search engines can’t read images - obviously - so it’s better to keep the text there, but just hide it a long way off the left side of the screen. Doing so will allow your heading to be heard by the visually impared, and make sure you maintain Search Engine Optimisation. Here’s how.
1. Set a background image
I’ve made my header image using the Requiem II font. Your theme might have an “images” directory in it already, but if it doesn’t it’s a good idea to create one so that all your images will be kept in one place. I have uploaded my image as wp-content/themes/elegant-grunge/images/steves_blog.png. To change your header image you need to edit your theme’s style.css file (if you want advice on editing theme files see Part 1 of the Make a theme series). Make your changes right at the end of style.css; that way your changes will override anything that is set further up in the file. You can add a comment line wrapped in /* and */ tags to help you remember what you’ve changed. You can set the background image on the <h1> heading tag as shown below. Make sure you change the width and height to the actual size of your own image. The no-repeat makes sure that the image will only be shown once, not repeated down the page.
/* Steve's header image */
h1 {
background: url(images/steves_blog.png) no-repeat;
width: 389px;
height: 81px;
}
Upload style.css if you need to and take a look at your site.
2. Hide the text
You can hide the text off the left side of the screen using a big negative indent:
/* Steve's header image */
h1 {
background: url(images/steves_blog.png) no-repeat;
width: 389px;
height: 81px;
}
h1 a {
text-indent: -9000px;
}
You need to indent the h1 a (the link text) rather than h1 (the whole link itself) so that in the next step you’ll be able to make the image clickable. If you were to apply indent to the h1 tag itself then step 3 below wouldn’t work.
3. Make the whole image clickable
To turn the whole image into a link you need to set the size of the link to be the same as the size of your image by adding a width and height to h1 a:
/* Steve's header image */
h1 {
background: url(images/steves_blog.png) no-repeat;
width: 389px;
height: 81px;
position: relative;
top: 30px;
}
h1 a {
width: 389px;
height: 81px;
text-indent: -9000px;
}
4. Move the image
You might be lucky and find that your image is in the right place, but in this example it would look better if it was lower down. You need to set the image to be positioned relative to other things on the page before the top position will work:
/* Steve's header image */
h1 {
background: url(images/steves_blog.png) no-repeat;
width: 389px;
height: 81px;
position: relative;
top: 30px;
}
h1 a {
width: 389px;
height: 81px;
text-indent: -9000px;
}
Here is my finished header. It looks better than the plain text, I’m sure you’ll agree.
Have you got any questions about this article? You can leave them below!
(2 votes, average: 5 out of 5)
Loading ...
Hi!
I’m trying to get my blog up and running, and this article was the most helpful that I’ve come across! But, the text indent doesn’t seem to move my text anywhere (the image shows up fine and is in a perfect spot). I’m on Firefox.
/* Geeky Onna header image */
h1 {
background: url(images/GeekyOnna.png) no-repeat;
width: 200px;
height: 50px;
}
h1 a {
text-indent: -9000px;
}
Temporary blog url (still have to forward my domain): http://runawayromance.com/wordpress
I’m glad the article is helpful! Add
display: block;to the h1 a section. Sorry, looks like I missed that out!steve, what about the shadow — is there any way of changing that too, so that it is as large as your image? Or maybe remove it completely?
Hi Martin
The shadow is an image, so you could find the image file in your theme’s directory and edit it to match. I’m afraid I’m still not all set up with my backups after moving, and I can’t remember which theme I used for the article so I can’t have a look!
Steve,
Thanks a lot for the help! display: block; did the trick!
Great, no problem!
Thanks for the great post. Just the solution I was looking for.
Hi Steve…
I just tried the HTML code on the i3theme, of the style.css file, but what ever I try to do the logo won’t change, and the text just stays there. can you try to help me out?
Hi Jacky
Try adding
display: block;to theh1 asection. That worked for me on a demo I just found of iTheme, but I can’t find a demo of i3Theme to check it. I expect it will work though!By the way Jacky, that will solve the problem of your text not going away, but it won’t help the image. Are you sure you’ve got the location of the image right? For example if your image is
wp-content/themes/i3theme/picture.jpgthen you needurl(picture.jpg).If you don’t have any luck with that, give me a link to the site you have it on and I’ll take a look.
its like the site tysiphonehelp.com
but my site is not published yet till this image is fixed, so i did copy the contents you put in, and erased the numbering 1. 2. 3. etc… and it was on default images/logo.png
if you think that the theme for that edit does not work, try using a theme that looks similar…
Where exactly is your image then? Is it at
wp-content/themes/i3theme/images/logo.png?yea the image is at that area…
It’s difficult for me to give you any more help without being able to see the website. If you have any specific questions about it though, feel free to post them and I’ll see what I can do! Good luck!
well the site is going to be ready, but i hope you can try my wiki site at wiki.aznjacky678.com
I’ve tried the following code on your wiki site and it works! Of course, you need to change the Google logo for your own one.
/* Header image */
h1 {
background: url(http://www.google.co.uk/intl/en_uk/images/logo.gif) no-repeat;
width: 389px;
height: 81px;
position: relative;
top: 30px;
}
h1 a {
display: block;
width: 389px;
height: 81px;
text-indent: -9000px;
}
Let me know how you get on.
w0w!!! thank you very much!!! it looks just great! but i just couldn’t hide the slogan… so i’m just going to erase it thanks!!!
No problem! I just had a look, it looks good :).
Enjoy the classic
http://obertfsp.com/wordpress/2009/01/15/css_image_replacement_methods/
Regards.
Obert
I have been trying to make this work, but It doesn’t seem to place the image. My theme is pretty unconventional (it has a fixed header, that exists at the BOTTOM of the page). The logo for my site is located in the themes image folder (so its wp-content/themes/mnml/images/artkamp2.png) and no ones tutorial seems to work in my case.
Hi Brandon
I’ve had a look at the source code of your header:
<div id="blog-title"><a href="http://www.artkamp.org/" title="ARTKAMP" rel="home">ARTKAMP</a></div>
Instead of being inside
<h1></h1>, your header is inside<div id="blog-title"></div>. So, instead of:h1 {
stuff here;
}
h1 a {
stuff here;
}
do this:
#blog-title {
stuff here;
}
#blog-title a {
stuff here;
}
Let me know how you get on!
Excellent tutorial, very helpful
Thank you thank you thank you - worked like a charm!
No problem!
Hi Steve,
Thank you SO MUCH for this!!! Especially the information about #blog-title <– that was the missing info which was keeping it from working. (Right now I’m testing everything on my test site http://www.lush.co.il - but when I finish I’ll replace my regular site which looks like complete crap.)
You are amazing. Thank you!!!
@shiraabel
http://www.tchochkes.com
No worries, glad to have helped!
Steve
Steve,
I’ve been trying to get this to work on my blog. I am using the theme Gear 1.3.5 and the code used doesn’t match what i’ve found here and in other resources. Could you please provide some assistance?
The creator of this theme is using both a head.css file and a header.css file, this is what is in the head.css file:
<a href=”/”>
<a href=”/”>
And this is the style sheet:
.header {
background: black url(images/header-pattern.gif) repeat-x 0 0;
}
.intro .intro-wrapper {
background: transparent url(images/logo.png) no-repeat 18px 18px;
padding-left: 80px;
}
.logo {
font-size: 32px;
font-weight: bold;
text-transform: uppercase;
line-height: 1;
margin-bottom: 0.25em;
color: #eead24;
display: block;
}
.logo a {
text-decoration: none;
color: #eead24;
}
.slogan {
font-size: 16px;
/* color: white; */
}
Several tutorials have instructed me to modify both, none are working. Please help.
Hi Jordan
With CSS files, anything in a file that is loaded further down the page will override things above it; so the key is to find which is furthest down, and make your changes to the end of that file.
Looking at the source from your site it seems that style.css is at the top, then lots of other CSS (I assume from head.css) is further down. So I would suggest making changes to the end of head.css.
See what happens when you paste the following code at the end of that file. If it doesn’t work there, move it to style.css. Let me know how you get on.
/* Header image */
h1 {
background: url(http://www.google.co.uk/intl/en_uk/images/logo.gif) no-repeat;
width: 389px;
height: 81px;
position: relative;
top: 30px;
}
h1 a {
display: block;
width: 389px;
height: 81px;
text-indent: -9000px;
}
Hey steve, i had a quick question, on my specific theme (width-smasher), the image shows up fine, but now the image is showing up and impending on the pages in the titles of the pages/posts.. not sure why its doing this but was wonderin if you could give me a hand, thanks
Hi Darren
I’ve had a look at your site, but can’t see anything wrong with it - does that mean you’ve sorted the problem out? If not, give me a link to a screenshot with a big arrow on it or something that points to the problem!
Great tutorial! Clear and concise:)
That helped a LOT,
thank you
Hi Steve,
Thanks for the article. I implemented your changes at my website (globalinvestmentclub.org), and my code looks like this:
‘#header h1{
background: url(http://globalinvestmentclub.org/wp-content/uploads/2009/07/GIC-Header4.jpg) no-repeat;
height:200px;
position:relative;
right:220px;
width:870px;
}
#header h1 a{
display: block;
width: 960px;
height: 200px;
text-indent: -9000px;
}’
Notice I have a toggle bar in the top right corner of the page to alternate between fixed and fluid width. I would like the header to work for both; right now, it is only placed correctly for fixed width and when I toggle to fluid width, part of the left end of the header gets pushed off-screen. Is there a way to make this work? Any insight would be greatly appreciated.
Thanks!
Hi Matt
Put fixed after the no-repeat, i.e.:
background: url(http://globalinvestmentclub.org/wp-content/uploads/2009/07/GIC-Header4.jpg) no-repeat fixed;
What does that do? You might need to add something like background-position: top left; or background-position: 0px 0px; - let me know if it works!
Hi Steve,
I realized that my header was actually too big, so I redesigned it in Photoshop for a smaller size and that did the trick. Thanks for the reply!
I was able to put an image in my header. It takes up a little over half the space and I have empty space on the right. I would like to put my blog description in that space. How do I do that?
Thanks,
Patty
Patty, I assume you mean the Blogspot blog that you’ve linked to - if so, I’ve had a quick look at it, but probably better to ask on a Blogspot site, or general CSS forum.
Good luck!
Steve
Thanks, Smith!!!
The display: block; made it!!!
No worries
Hi Steve im very new in this works and im trying to make my wordpress i dont understand nothing from ur post i just finded style.css and i finded the h1
h1#blog-title {
float: left;
margin: 50px 10px 0 0;
padding: 0px;
font-size: 18px;
}
h1#blog-title a {
color: #fff;
text-decoration: none;
}
h1#blog-title a:hover {
text-decoration: underline;
}
h2#blog-description {
float: left;
margin: 57px 0 0 0;
padding: 0px;
color: #f8dec7;
font-size: 11px;
font-weight: normal;
}
and my logo is in images/logo.png 320 x 79 px
I’ll be very happy if u help me.
Thank You and sorry for my english :$
Give this a go! This puts the Google logo on your page (I’ve tried it). But I can’t find your logo.png though. Don’t worry about your English!
Steve
h1#blog-title {
float: left;
margin: 50px 10px 0 0;
padding: 0px;
background: url(http://www.google.co.uk/intl/en_uk/images/logo.gif) no-repeat;
width: 320px;
height: 79px;
position: relative;
}
h1#blog-title a {
color: #fff;
text-decoration: none;
display: block;
width: 320px;
height: 79px;
text-indent: -9000px;
}
h1#blog-title a:hover {
text-decoration: underline;
}
have there any way only to hide the tagline ? i dont want to delete it cause it works in engines for better search.
PS. Thank you very much for your help for title. I really appreciate it
#blog-description {
text-indent: -9000px;
}
That should do you! You could do
display: none;, but often search engines will then ignore it, so it’s better to hide it with a large negative indent, which puts it a long way off the left of the screen.Thanks for the thanks, it’s no trouble!
Steve
Great blog. Does this work for blogger. I have attempted and it doesn’t seem to apply.
http://selfemployedmavens.blogspot.com/
You could do something similar with Blogger, but would need to change the h1 to something else. I had a look at your blog you linked to - it’s already got an image header, what exatly do you want to change?
Hello,
I have been trying to replace my text on http://www.healthpad.org with a logo and have been not able too. I have tried everything that has been posted here and it has not worked. I was wondering if you could take a look at it.
logo: http://www.healthpad.org/logo1.gif
Thanks, Brett
Brett
Here you go! Your theme doesn’t have the main heading in h1 tags, instead it’s enclosed in a span with a blog-title id, which I’ve used below. I’ve also added a display: block to the #blog-title element, to make it show up right. I’ve set the left and top so that it lines up about right.
Steve
#blog-title {
display: block;
background: url(http://www.healthpad.org/logo1.gif) no-repeat;
width: 306px;
height: 81px;
position: relative;
left: -10px;
top: -20px;
}
#blog-title a {
display: block;
width: 306px;
height: 81px;
text-indent: -9000px;
}
Thanks Steve,
I ended up changing templates and had trouble with this one too but figured it out.
Guess all templates are a little different.
Anyways thanks a ton!
Brett.
No problem, glad it’s sorted!
Steve
Steve if you have a minute, would you please take a look at my site. I’m using the autofocus theme and can’t get the above to work. The path to my logo is: “wp-content/themes/autofocus/images/AlwaysThirteenlogo.png” but I am not able to get the title text to go away or have my logo appear. Thanks so much for your help.
This seems to work. I had to set the width of the
h1 ato zero. You might want to change thetop:andleft:values, I’ve put it where it looks about right though.Steve
h1 {
background: url(wp-content/themes/autofocus/images/AlwaysThirteenlogo.png) no-repeat;
width: 389px;
height: 81px;
position: relative;
top: 10px;
left: -10px;
}
h1 a {
display: block;
width: 0px;
height: 81px;
text-indent: -9000px;
}
Steve thank you so much. I pasted the above code in at the very bottom of the style.css page and now the text title is gone except for the second line of text “Always”, but still no image. I’ll leave it like it is so you can see what I’m talking about.
Got it. I needed to add more to the image address. Thanks again Steve.
No worries, glad to have helped!
Steve
Thanks for your code help. I’m a newbie. I’ve edited in the code you suggested above for hiding my header text. But it doesn’t seem to work. I’m editing this through the admin on my wordpress.org dashboard. There is actually an option for hiding the text in the Appearance submenu, but this seems to (as you warned above) make the text invisible from search engines and doesn’t make the image clickable. I’ve typed in the h1a
display: block;
text-indent: -9000px
and
height: 150px;
width: 970px;
but nothing changes. Any help? Thanks so much.
I sort of figured out part of this (above). This theme has a function.php page that allows the header image to be changed in the WP editor and the text hidden as well. I agree with you that hidden text is bad. I changed the function page (as well as the css page) code to -9000px and the text is gone (but not hidden). Unfortunately, there’s a hover highlight still there that I have no idea how to get rid of. Not so worried about making the image a “home” link but would kindly ask for some help on getting rid of that hover highlight. http://themikieshow.org. Using the vita 1.6 theme. Thanks. BTW I’ve hidden the text for now ’cause that hover thing is so annoying.
Hi i find this post helpful. i just want to ask for help will you tak a look at my blog i have a problem in my feed i think the header is the one causing the problem
XML Parsing Error: XML or text declaration not at start of entity
Location: http://feeds.feedburner.com/photographia
Line Number 2, Column 1:
^
here is my feed:
http://feeds.feedburner.com/photographia
really helpful tutorial especially the comments, thanks, i am building my own domain soon.
Thanks Steve. Is it possible to add a small logo also to this? If I would like to leave both the text lines intact and add a logo on top of them. Is that possible too?
Hi! Just wanted to say that it’s cool that you answer all these comments. Usually people that write the tutorials just answer two or three.
With that said, I’m adding thewpmag.com to my bookmarks!
Thanks, I try!:)
Hi Steve!
Thank you so much for the tutorial. I have my logo positioned where I want on my home page of http:lyfestlyes.net/frugaljunk/
but when I view different post pages the header reverts back to text. I added the code below to the bottom of my style css:
/* Header image */
h1 {
background: url(http://lyfestyles.net/frugaljunk/wp-content/uploads/2009/11/frugaljunk.jpg)
no-repeat;
width: 728px;
height: 90px;
position: relative;
top: -50px;
}
h1 a {
display: block;
width: 728px;
height: 90px;
text-indent: -9000px;
}
I noticed further up in the style css that there is this code:
/* header */
#header {
}
#branding {
font-weight:bold;
color:#f6f6f6;
padding-top:28px;
float:left;
width:755px;
}
#blog-title {
font-size:32px;
float:left;
margin-right:5px;
}
#branding a { color:#dcdcdc; }
#branding a:hover { color:#0177c6; }
#blog-description {
display:block;
float:left;
line-height:200px;
position: relative;
top: -40px;
}
I had to play with the blog description positions to move the tag line where i wanted it. I am confused as to whether or not anything should be put in the #header {} section for it to work???
I know enough to get me in trouble when it comes to modifiying themes, any help would be much appreciated!
Thanks
Hey Steve. I have tried to implement your solution but it causes the main content of my site to shift to the right. My site is http://www.appletabletwire.com . Here is what i can add to get the logo to look semi right. But by doing so the content gets shifted halfway to the right. Any suggestions?
/* Chris’s header image */
h1 {
background: url(images/logo.jpg) no-repeat;
width: 252px;
height: 110px;
}
h1 a {
width: 252px;
height: 110px;
text-indent: -9000px;
Display: block;
}
/* Chris’s header image END*/
Also is there a way to remove the vertical line to the left of my site name text? Thanks.
Hi, here you go, add this:
#content {margin-top: 10px;}Your bigger header is banging into the content div.
Steve
I missed your stray line!
#header .caption {border-left: 0;}Thanks. Add it under h1 or h1a?
Nevermind. Figured it out. Thanks so much for your help. You are the best.
Hi Steve,
Thanks for publishing this great tutorial. Actually, i’ve used your technique on several themes and they worked out fine every single time. But this time i can’t get it to work on a theme i’m using right now.
I’ve placed the code at the end of style.css. I hope you can help me with this.
Regards.
No problem, Chris!
John, if you mean rawkidrocks.com, your h1 tags are around your post heading, not your main heading, so you can’t replace h1. What ectly are you trying to replace? The word “rawkid” at the very top?
hi!
I’m working on the following:
http://www.lexusfoorum.net/ummiqngla001/wordpress/
Image is (TEMPORARY LOGO FOR TESTING, logo still coming:)): http://www.lexusfoorum.net/ummiqngla001/wordpress/wp-content/themes/mypapers.1.7/mypapers/images/logo-second-life.gif
I’ve added different solutions here to the theme css but no change yet.
Theme: http://wordpress.org/extend/themes/mypapers
I could use font-based logo, but I don’t think 95% have the font
Help is warmly welcome- I need to get that web up and running soon to a different domain.
Hi!
I had a following solution (changes in Theme’s “header.php”:
<a href="/">
Sorry, here’s a link to the code I used: http://lexusfoorum.net/foorum/pildid/replace-logotext-with-image.txt
hi,
thanks for the code. 2 quick questions:
1. in firefox and chrome, the logo is loading properly with the ‘title’ text off to the side on the homepage, however, when i go to a post, for example, the ‘text’ is back covering the logo.
2. in IE, the homepage is perfect, however, when you load another page, such as a post, the logo is in the title of the post and the ‘title’ text is at the top.
Thanks for any help!!!
Hi!
My H1 header text logo is all embedded in a bunch of PHP:
<?php if (is_home()) echo(”); else echo(”);?><a href=”"><?php if (is_home()) echo(”); else echo(”);?>
How can I replace the H1 tag with an image in this case?
Thanks!
OOps looks like it all got stripped out. You can view the code in a txt file I made here:
http://www.sendspace.com/file/rky4v6
or let’s see if this works:
<?php if (is_home()) echo(''); else echo('');?><a href=""><?php if (is_home()) echo(”); else echo(”);?>
Thanks!
Leave your response!
What is WordPress?
Twitter
Tags
categories colour CSS design Featured themes Grid Runner Adventures header Interviews last.fm Make a theme series music pages Plugins Private Plus register Register Plus search sidebar tags The Loop theme themes travel water widget WordPress.comMost Emailed
Most Commented
Most Viewed