Making Your Background Image Banner a Link

The current thinking in blog design is that your blog banner should be a link to the home page of your blog site. I overlooked this fact when building this blog. My ever-observant colleague Kim Larsen told me that she thought the banner should be a link, so I went back to the drawing board.

If our banner were just a straight image, it would be an easy process. You just wrap your img in an a tag and add a few style elements.

Unfortunately, our banner is actually a background image. I designed the site that way because I wanted to float the nav bar elements in front of the banner. Making a background image into a link is technically impossible, but I figured it out with the help of the Web at large and some clever reorganization of our stylesheet.

First, I had to change the way our stylesheet was making the banner. Before, it was merely an empty div in the header section with the following attributes:

.bannercontainer {
height:132px;
width:920px;
background-image: url(build/blogheaderimage.jpg);
background-repeat: no-repeat;
}


In the header section, I changed the empty div to an a href="http://blogbusinesssummit.com" with the following attributes:


#bannercontainer {
display: block;
height:132px;
width:920px;
background-image: url(build/blogheaderimage.jpg);
background-repeat: no-repeat;
}


Notice that in order to have an empty a, you need to make it a block-level element in the CSS.

This made the banner into a link back to the blog portion of the site, but it created a new problem. Every time I hovered my mouse over the banner image, it got an underline. No matter how many styles I added to the #bannercontainer element, nothing changed.

If you run into this problem, you might need to investigate what other divs your banner is sitting inside of. Maybe one of them is the culprit. In our case, the div responsible holding our site together needed some additional styling. I also needed to place it lower in the stylesheet to override some other styles.

So that’s how we made our background image banner into a link. Hooray for CSS. Now, I’m off to finish migrating the Fortune 500 project and do a dozen other things that need doing.