AWM Creative

Transforming a Logo into a Clickable Background Image

Published in CSS, HTML/XHTML by Aaron

Making your logo a clickable background image can have its advantages. There is some debate whether it’s worth the extra markup. Here are some reasons why I think its worth pursing:

1. Viewable for browsers/mobile devices
   that may not support CSS
2. SEO (Search Engine Optimization)
3. Provides more options with layout flexibility

Why not give it a try? Making a background image clickable is pretty straightforward and actually very similar to the image flicker tutorial.

CSS


.logo h1 {
   display: none;
}


The h1 tag hides the site name text underneath the background image.


.logo {
   margin: 40px;
   background: url('logo.gif') no-repeat;
}


The .logo class includes the background image, which would be your logo. You’ll also be able to set the position of the logo with this class.


.logo a {
   display: block;
   width: 187px;
   height: 53px;
}


Styling the a defines the clickable area around the logo. The dimensions will most likely come from the logo itself.

Here’s what the logo looks like when it’s selected:

And here’s what the logo will look like if you disable your CSS:

(X)HTML


<div class="logo">
   <h1>Website name goes here</h1>
   <a href="#" title="Website name goes here"></a>
</div>


Above are the few lines of (X)HTML code. There are three things happening here.

• div – container for the h1 and link
• h1 – provides the text for the site name
• href – defines the clickable area and should link to the home page

You may be thinking why isn’t the h1 tag placed between the href tags? Well, the main reason is because it’s NOT valid markup according W3C Standards.

Now you know how to make a logo into a clickable background image.

Enjoy!

CSS

• Demo
• Source Code