CSS Tutorial: Image Replacement/Link Logo To Homepage

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. CSS Tutorial: Image Replacement/Link Logo To Homepage

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.

<a href="http://tutvid.com">Magic Hat Independent Film Festival, Philadelphia</a>

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”.

<a class="header-logo" href="http://tutvid.com">Magic Hat Independent Film Festival, Philadelphia</a>

4. Start Writing The CSS

We are going to target our class using CSS. Check out my code below:

.header-logo {

}

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:

.header-logo {
display:block;
}

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.

.header-logo {
display:block;
width:506px;
height:119px;
}

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.

.header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
}

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.

.header-logo {
display:block;
width:506px;
height:119px;
background:url(../images/logo.png) no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

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.

.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;
}

Follow Me On Twitter! Like Tutvid on Facebook!

Tags

Bio
Latest Posts

Nathaniel Dodson

I make videos about being creative with photography, design, and filmmaking. I'm a commercial photographer, a logo designer, a camera nerd, an artist, a wannabe thinker, and I like to read books. I arrived on planet earth in the year 1989.