Video
1. Start By Writing H1 Tags
We want to wrap our link in an h1 tag to let search engines know that the text in our link (which will be replaced by an image) is very important text. Drop an opening and closing h1 tag where you want the logo to appear.
2. Place Our Link
We now need to code in our link within our h1 tag. Check out my code. NOTE: I’ve placed the company name and geo-tagged “Philadelphia” in the text in our link. This is a great line for SEO.
[code type=”css” title=”Code”]Magic Hat Independent Film Festival, Philadelphia[/code]
3. Add Our Class
The next step is to place a class on our anchor tag (our link). I’m going to make up a new class and call it “header-logo”.
[code type=”css” title=”Code”]Magic Hat Independent Film Festival, Philadelphia[/code]
4. Start Writing The CSS
We are going to target our class using CSS. Check out my code below:
[code type=”css” title=”Code”].header-logo {
}[/code]
5. Display:Block
We need to take our inline element (our link) and convert it to a rock solid “block level element” which we can size and set an exact background to. Check out my updated code below:
[code type=”css” title=”Code”].header-logo {
display:block;
}[/code]
6. Set The Width & Height
Now that we have a block level element we can set our link (which you can now think of as a box) to have the exact width and height of our logo file. Go check out the width and height of your logo and set a width and height in CSS for the class. As of right now, we still don’t have a logo image, but this will start to constrain our text within this invisible box.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
}[/code]
7. Set Background Image
It’s time to drop in our logo image. Setting a background image for our “a” tag is a breeze with CSS.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
}
[/code]
8. Text Must Disappear
Using a method developed by Scott Kellum[http://scottkellum.com/], we will push this type out of the way so we can see our image, but hide the type. We’re going to set our text to be indented 100%. This will always make sure our type is outside of the logo. The white-space:nowrap will ensure that our text doesn’t wrap around to a new line. Overflow:hidden ensures that once the text is pushed outside of our invisible box, it’ll be hidden.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}[/code]
9. Center The Logo
The last step here will be to center this logo using CSS. Set the margin as I have in CSS and check out the results. This is a simple, no-nonsense way to quickly and effectively place your logo, or other image, using CSS.
[code type=”css” title=”Code”].header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin:0 auto;
}[/code]
Will the logo also be printed in this way? I remember some issues, when you wrap an image as a background with CSS, that it will not be printed out.
How did you made that hole under the logo? I think you should do a tutorial for that too…
Use Png 😉
… That wouldn’t be complety CSS…
It would also help if you place the logo as an img tag with an alt text and add your keywords there to.
Actually, I believe as a rule of thumb, you should always have a logo as an img tag on page, you would still able to achieve this tutorial as well (hiding the text).
Clear & direct 🙂 Tx
that was awesome!
Hi Nathaniel,
I have been following this tutorial since I knew the trend of css image replacement by -9999px has become old, so I followed this. I have a little question here what if we use the same technique by making our logo container absolute in a parent div which position is relative? Is that okay for the same seo and accessibility purpose?
Many thanks.
Hi, having issues with CSS Image Placement… When I add to my code “Villas de Costa Mar vacation rentals, Dorado Puerto Rico” my log images do not resize when in tablet or phone size?
below is my CSS code:
header a.logo { display: block; position: absolute; background-position: 0px 0px; background-repeat: no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; }
@media screen and (max-width: 990px)
}
header a.logo { width: 354px; height: 281px; top: 35px; left: 20px; background-image: url(../_img/logo-large.png); margin-top: -45px; margin-left: -40px; margin-bottom: 5px; }
Any help or direction would be greatly appreciated, Thank you for sharing your knowledge!