CSS Tutorial: How to create CSS image rollovers with a single background image

Share

Everybody is looking for lightweight code with a maximum effect. JavaScript rollovers just don’t cut it anymore- they take too long to load, they’re kinky the first time you rollover, etc. etc. and CSS using multiple images can be kinky if you aren’t using an image pre-load. The solution? CSS image rollovers using only a single background image.

If you don’t have a solid understanding of using lists for navigation, then you may want to review that concept before tackling the single-background-image rollover.

Download the example to follow along.

The concept

You have, for instance, a navigation bar (vertical or horizontal, it doesn’t matter). Very simple. There are only four buttons but you can obviously change and edit this concept to fit your own site.

How is it done?

Well this is what the HTML in the example looks like (using lists, of course):

<ul>
<li id="home"><a href="index.htm">Home</a></li>
<li id="about"><a href="pages/about.html">About </a></li>
<li id="portfolio"><a href="pages/portfolio.html">Portfolio</a></li>
<li id="contact"><a href="pages/contact.html">Contact</a></li>
</ul>

What? Impossible? Not so much.

When I first learned this technique, I was not aware that you can position the background image by location and pixels. It’s all very controllable through CSS. So, moving right along…

The beauty of CSS

So what does it take to make this work? Well this is what the CSS looks like in the example to make this turn out right:

* {
 margin: 0;
 padding: 0;
 }
 body {
 background: #1B78E2;
 }
 ul {
 background: url(nav-sprite.jpg) no-repeat;
 width: 600px;
 height: 50px;
 list-style: none;
 }
 li a {
 display: block;
 width: 150px;
 height: 50px;
 text-indent: -999px;
 float: left;
 }
 li#home a:hover, li#home a:active {
 background: url(nav-sprite.jpg) 0 -50px;
 }
 li#about a:hover, li#about a:active {
 background: url(nav-sprite.jpg) -150px -50px;
 }
 li#portfolio a:hover, li#portfolio a:active {
 background: url(nav-sprite.jpg) -300px -50px;
 }
 li#contact a:hover, li#contact a:active {
 background: url(nav-sprite.jpg) -450px -50px;
 }

First of all, I’ve set the padding and margin to 0 by using the wildcard * command. That way it will be more likely to look correct in every browser.

Then I set the width and height of the entire navigation by setting the ul.

Next, I set the commonalities of every li: display block (allows you to get rid of the text later as well as the width and height), set width and height, as well as using text-indent to move the ugly text off the page so we can see the pretty typography of the navigation images without losing SEO friendliness.

The rest of the CSS simply sets the background and position of the same background images. When setting a background position, keep in mind that the first number represents the way it moves horizontally (negative numbers will move it left, positive numbers will move it right), and the second number sets the vertical position (negative moves it up, positive moves down).

li#home a:hover {
 background: url(nav-sprite.jpg) 0 -50px;
 }

Be sure that you are selecting the correct link and link/hover/active/visited state for full support in all browsers.

Go forth and write navigation

This simple trick will help you develop quick loading sites that don’t jump or hiccup when using rollovers. No need for JavaScript or slicing and saving 25 individual rollover images! Saves production time AND creates better usability for your sites.

Good luck coding!