Why slice a new image for each item in a navigation when you can use the same image for all of them? If you’re thinking you can’t do that without sacrificing rollovers, think again. By creating a navigation using an image sprite, you can have a complete navigation, rollovers and all, by only using one image.
What is an image sprite?
Image sprite originated from old nintendo games - what developers had to do to keep the game from having to load a new image each time a different character entered the screen was store all of the images into a grid - once they had this grid they could call different sections of it and tell it to display it on the screen. The same big image was loaded one time, from then on different sections were called and displayed on the page.
How to use image sprites to create a CSS navigation
What we are going to do is copy the old image sprite technique used in video games, and apply it to our CSS. How you ask? We can do this in by off-setting the background position of each list item in our nav. Let me break this down step by step to help understand this concept.
1. First thing I did was create a very simple image for my nav bar, you can make one the same as mine if you are following along or if you’d like, it should be clear enough to make your own.
2. Once I was satisfied with my image, I exported it as nav.jpg. Once you have that image exported, change something on your navigation, you can change the color of the background, underline it, drop shadow or anything you want as long as the text for the titles don’t get too close to each other where they are interfering. Once you have made these changes, export the image again but call it: nav-over.jpg.
3. Now that we have two images, we need to combine them together into one image. Open both of the images, with nav.jpg selected, go to the Image > Canvas Size… option. Select the top of the image as the anchor point and change the units of measure to percent. Now make the height 200% and click ok.
Now our nav.jpg is in the top of its window, with blank space beneath it.
4. With Snap turned on, drag nav-over.jpg into the same window as nav.jpg. Place it exactly below it so it fits perfectly into the newly created space. Our new image should look something like this.
5. Now resave nav.jpg with both of the images combined, this is going to be the image we use for our navigation.
Once you have the image saved, we can start applying HTML and CSS to get this sucker working.
6. First we need the HTML, here we can make a simple unordered list that includes a different li for each of the buttons we created in photoshop (in this case 4.)
<ul id=”nav-example”>
<li id=”nav-example-01″><a href=”#”><span>Blog</span></a></li>
<li id=”nav-example-02″><a href=”#”><span>Portfolio</span></a></li>
<li id=”nav-example-03″><a href=”#”><span>Resume</span></a></li>
<li id=”nav-example-04″><a href=”#”><span>Contact</span></a></li>
</ul>
7. What we have now is an unordered list with 4 different button list items that each match a certain button on the navigation. The reason there is a span tag with the text inside it is because this way search engines see the text, not just an image. We will end up turning the span to display:none so the text doesn’t show.
This is still viewed as white hat SEO because the text matches the same as the text in the images. Be careful because you can get flagged for putting different content in the hidden fields if it doesn’t match the text on the background image.
8. Here is the final CSS of the image sprite navigation, the final example is at the bottom of the post, I’ll break each section of the CSS down piece by piece:
#nav-example {
background:url(”/images/nav-final.jpg”) no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}#nav-example span {
display: none;
}#nav-example li, #nav-example a {
height:40px;
display:block;
}#nav-example li {
float:left;
list-style:none;
display:inline;
}#nav-example-01 {
width: 98px;
}
#nav-example-02 {width: 131px;}
#nav-example-03 {width: 123px;}
#nav-example-04 {width: 138px;}#nav-example-01 a:hover {background:url(”/images/nav-final.jpg”) 0px -40px no-repeat; }
#nav-example-02 a:hover {background:url(”/images/nav-final.jpg”) -98px -40px no-repeat; }
#nav-example-03 a:hover {background:url(”/images/nav-final.jpg”) -229px -40px no-repeat; }
#nav-example-04 a:hover {background:url(”/images/nav-final.jpg”) -352px -40px no-repeat; }
9. The first part is the sizing and background image of the nav bar, the reason we set the height to 40px is because that is how big my original nav.jpg was before I combined it with the nav-over.jpg. This way only the top half of the image displays.
10. The #nav-example span is set to display none, this is what is going to hide the text of each list item. (Remember be careful not to try to hide keywords in these hidden fields, search engines will penalize you.)
11. #nav-example li, #nav-example a {height:40px; display:block;} - What this line is doing is displaying each list item and link to display block with a height of 40px. This makes sure that each link on the navigation is the same size. The reason it is displayed as block is so we can change the size of it, if it wasn’t we couldn’t change the width and height of each link.
12. #nav-example li {float:left; list-style:none; display:inline;} - The float:left is making it so each list item moves to the left side of each li below it, display inline makes sure they display in a horizontal line. List-style: none changes the li’s to not have a bullet next to them, sweetness.
13. #nav-example-01 {width: 98px;} - This is setting the width of the first button “Blog,” if I wanted to start this button 10px off the left side of the #nav-example I could do it by setting margin-left: 10px. The next couple lines are setting the width of each individual link, this way the 4 link widths add up to the total width of my main navigation(you can measure each link by either making guides or selections). Now comes the cool part.
14. What we have to do is set the a:hover state, the way the background is offset on each hover is (horizontal number of pixels) (vertical number of pixels.) Since we have a horizontal nav bar, the vertical number of pixels to be offset is going to be the same for all of them. For the first one it is going to be 0px -40px, 0px because the background image only needs to come straight up to the top left of the nav, so what we do is tell it to go 0px left or right and -40px vertical, a negative integer brings the background UP. This shows the bottom part of the sprite nav, and since we set the width of the li’s it only shows on the particular li we are hovering over.
15. To get the next number we take the width of the nav-example-01 and subtract if from the previous horizontal offset number(which was 0 in this case.) 0-98 = -98px, I’m a math genius. Now we can put this in for the next li, nav-example-02 a:hover will be -98px -40px no-repeat.
16. We do the same for the next one now, -98-131=-229px. Now the offset for the a:hover on nav-example-02 is -229px -40px. This is moving the top left corner of the li background image to the correct position.
17. Normally if you were to put the a:hover’s background image to nav-final.jpg, whichever li you were in it would show the new background image in the top left corner of it, this is why you have to offset the horizontal value to get the correct section where you want it.
18. Now if you do the same process for calculating each button you’ll end up with the same numbers I do, unless you have your own nav with more buttons or different width, then you’re on your own at this point. Once all the CSS is laid out correctly your nav should function like this one below.
Any questions can be posted below in the comments and I will try to answer them as clearly as possible.
Look forward to a new and improved article on my San Diego web design company’s blog.
UPDATE: The new post has been created here: CSS Image Sprites Tutorial - Create Multiple Buttons With Rollovers, all questions should be posted there. Thanks for everyone’s interest.
{ 37 trackbacks }
{ 112 comments… read them below or add one }
It’s also important to point out that this way of doing an image-navigator through CSS, concedes with the lines of accessibility through W3’s WCAG.
…as long as you remember to have a good contrast on the background and the text-color
That was absolutely pukka!
The Bloc Party website was designed like this and I was really impressed with the concept as it is a low resource way of using Custom typography.
What happens if you float the element in your design though? will the internal co-ords still be absolute??
It will still work if you float it, the reason is that the coordinates are only changing the background position, not the position of the actual nav. It should be fine, if you try it and run into problems let me know and I can figure it out for ya
Very nice. Css is amazing. I love what you can accomplish with it.
Thank you for posting this. This is an awesome technique. I use it on all my sites.
Thank you, I just wanted to give a greeting and tell you I like your website very much.
What happens when the client comes back next year and asks for three more links in the navigation, then asks for padding to be reduced between each link? You’d need Photoshop each time the positioning needed editing. Wouldn’t the nav be better served by slicing each link individually and using CSS to pad them, rather than all in one piece? Otherwise this seems like a really un-scalable solution.
Maybe I’m alone but using photoshop one time a year doesn’t sound like too much work to me. You are going to have to make new slices any way you put it, in your case, you’ll be making a lot more slices which also turns into more code. The amount of time it takes me to add links, reslice and code the nav would take me a lot less time than slicing 3 more images and coding each one of them.
Definitely true - there are many ways to skin a cat. Before reading yours, I was more familiar with the Sprite/Sliding Doors method where the text is ascii and the images are scalable, thus no Photoshop required.
Thanks for example! I will use it!
@Darren
There are many ways and that is the best part about it! I have seen that sliding doors example before but one of the advantages of this way is that you don’t have to use a default font. You can use any font you want and add text effects to it. If all I wanted was a background or color change that is definitely one of the ways to go about it though. Thanks for the comments-
Someday I will switch to CSS. But tables are so much easier to work with.
I should point out that it’s slightly less code if you leave off the full background declaration in the :hover portions and just set background-position appropriately. That way you only specify the image in one place and thusly make your life better.
Your implementation is a little strange, because you actually seem to mask a general background with a more specific one per-element, whereas the approach I would probably have used would have had each element having its own background to begin with, and then moving it.
Anyway, sprites rock
I would argue this is not the most accessible way of doing things. As Roger Johansson recently pointed out (http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/), display: none; is not always read by screen readers. In this case, I would recommend removing the spans as they are not necessary and using the text-indent: -9999px; command to move the link text off the page and keep it accessible to screen readers.
Otherwise, the rest is well formed. Keep up the good work.
Best,
Daniel
You show us very important matters. most of your guideline is unknown to me. I was very much needy. I was searching since long time. I am really lucky at least I found your blog. Thank you for your kind consideration.
Here is good tutorial about CSS : CSS Tutorial
Here is good tutorial about AJAX : AJAX Tutorial
Hi! Thanks for the tutorial, but somehow I can’t make it work.
Maybe I did something wrong and just can’t figure out what. Anyways! KUDOS to the tutorial! Hoping that I can use it correctly! 
okay… sorry for triple posting. it worked fine now!
the only problem was the ” sign… it showed a different one in my control panel. anyways! THANKS SOOOOO MUCH!!!
I had problems but now it’s working!
Thanks!!!, You are sooo helpful!
Hi, this tutorial is amazing. I just finished implementing something similar based on this tutorial. Kool!
Thank you, this is exactly what I was looking for. This Rocks!
I like the tutorial,and was able to make it work for my own images the first try! Thanks. However, I was trying to create a dropdown navigation for two of the links, and just can’t seem to make it work. I have reviewed suckerfish, and all the others out there to be googled, but am having no luck modifying or understanding the code to work in my instance. I’m creating this for my company’s intranet which uses IE6, and am an intermediate developer. Thanks in advance for any help.
Is this where you are referencing from? http://www.htmldog.com/articles/suckerfish/dropdowns/
That is the method I usually use but I’ve never had a problem in IE6, just IE7, in that case I use the swfobject javascript.
If you still can’t get it maybe you can send me your code for the nav and I can take a look at it. The easiest way to do that is probably using the contact form. If you do this I can try to get to it as soon as I can
Jose check your email, I sent you a request for the jpg image. Also, try not to post your code here, use the contact form on the Contact page. Thx
I need it too! my e-mail: zepp@enfootwear.com! Thanks!
I finally got it to work, after hours of hair pulling. I would like you to look at my code if you don’t mind to give me pointers as to where it can be cleaned up, etc. Sorry about the mess I made before, I am new to the posting and blogging stuff. I will send it the ‘right’ way later. Thanks for your help.
CSS is so much more difficult for me to do everything. I find it such a waste of time. But your post actually makes some sense. So i might give it a go again. Thanks
Awesome stuff! Thank you for letting me know about this! it seems very helpful. this tutorial is amazing. thank u again for sharing.
so what happens when a user with images on but css off ? can this be made to degrade back to something usefull to the handicaped browsers
Nice
Thanks for post! It’s really interesting for me
Excellent stuff. Thanks for the tutorial. I find CSS more difficult to work with. But after reading your article I will certainly try it.
Thanks.
I’m totally confused and sad because I just can’t get a background. The list is order properly :S
I don’t understand what I’m doing wrong and it’s really frustrating.
can someone please help me?
great tutorial.
how ever the menu i’m making is vertical. So i tryed to aply this tutorial to that… i seem to have got it to work … but the images wont show.
Nvm … included a pngfix script and it works like a charm.
Thanks for the tut. Works great on my site.
Cool. It works great on my site. I’m share this to my friends
Very very cool. its also looks on my site
awesome, i’m so glad i found your website.
Great tutorial. Thank you!!
Could you please explain how you would maintain an active state on the button which relates to the page that is being viewed.
Is it possible?
cool
@Michael
The easiest way for me to get the current page to show the active state is to use a body id. So if its the index file I’d have in the actual HTML.
This way in the CSS you can write a specific rule for it like so,
body#index #nav-example-01 {background:url(”/images/nav-final.jpg”) 0px -40px no-repeat; }
Awesome and clever technique! Can you give an actual working example of your sprites menu keeping the active state showing? I’m not sure how to apply what you’ve said above about it. I made my graphic with a 3rd extra darker button row for the active page link and added a section with lines like #sprite-nav-01 a:active {background:url(”images/my-nav.gif”) 0px -60px no-repeat; } etc. The active button shows when I click a page link but it won’t stay to show its the current page. Each button in my 600×90 graphic is 100×30 each for a 6 button nav bar. Thanks!
Sorry, I forgot to post my test page link to my name.
I got the active page buttons to stick after I figured out to modify the html body tag to etc. for each of my test layout pages,(matching the menu link names and css code references. Thanks so much for your sprites code!
Great tutorial man. Glad to see a lot of people are figuring this technique out. Good job spreading the word!
Cool Steve glad to see you got it working
Woow. interesting post.
thanks for all.
Great tutorial! I’m trying to implement this with sub level drop downs. Everything works great except…when I mouse onto the drop down sub level I lose the mouseover state of the main level. Any suggestions??
@josh - Ive never been able to/tried to get the rollover to stay in the hover state when going to the sub navigation, I’ll see if I can figure something out
Wow great! I did see this:
http://www.tyssendesign.com.au/examples/IR-navbar.html
The hover state stays intact on this example but I still can’t figure out how to integrate it into your example.
I’m doing something wrong. I have no idea what. My hover state doesn’t display. Would someone be willing to look at my code? I followed step by step too!
Please, Please, Please. I want to learn how to do this!
very nice…thanks..that helped a lot!
=P
Good my comment is 59 !!! Its a cool blog I ve got to tell ya, Info help me a lot, just like for you Ben Wagner
I never understood how they did any of this. Wow, CSS has so much involved. I’m intrigued though now. Interesting blog, great tutorial for those that have no clue how to do this stuff… thanks for posting!
Can you tell me why my image only shows on hover:
http://www.sandleraia.com/28a.php
Same thing on that page when I used your image and related code.
Thank you.
Hey Dave -
Try adding background: none; to the line #nav-example a. Should looking something like:
#nav-example li, #nav-example a {
height:31px;
display:block;
background: none;
}
Thank you Alex, that worked!
OOPS - it works in FF but not IE, any further ideas???
Dave - Sorry about that, looks like you need a space between your background url and no-repeat on #nav-example. Should look like this (so there is a space between .png) no-repeat)
#nav-example {
background:url(/images/nav-bar.png) no-repeat;
width:776px;
height:31px;
margin:0;
padding:0;
}
Thats why we love IE6
That did it, Alex - sorry for my carelessness, and thanks again.
alright fools, spent all day figuring this one out. I had a sprite sliding png menu that had to work in IE6.
The only way to accomplish this is to put a link with the background png inside of a div that has overflow:hidden, and then on a:hover change the relative position of the anchor tag within the div.
THE CSS:
#header_tab{
position:relative;
overflow:hidden;
float:left;
height:35px;
width:72px;
}
#home_link {
display:block;
position:relative;
top:0px;
bottom:0px;
height:70px;
width:72px;
cursor:pointer;
background:url(../images/header/tab_home.png);
behavior: url(iepngfix.htc);
}
#home_link:hover {
top:-35px;
left:0px;
}
THE HTML:
Hope this helps anyone trying to pull this off. There’s also a version of the twinhelix htc file that supposedly does some background positioning automatically, but i couldn’t get it to work right (it’s in beta I think).
any questions: dan[at]kickascii[dot]com
the HTML was stripped from my above post…
{div id=”header_tab_left”}
{a id=”home_link” href=”#”}{/a}
{/div}
crap..I forgot to change the id on the header tab..here it is in the correct form.
{div id=”header_tab”}
{a id=”home_link” href=”#”}{/a}
{/div}
If you add this to the CSS:
#nav-example-01 a {background:url(”/images/nav-final.jpg”) 0px -40px no-repeat; }
#nav-example-02 a {background:url(”/images/nav-final.jpg”) -98px -40px no-repeat; }
#nav-example-03 a {background:url(”/images/nav-final.jpg”) -229px -40px no-repeat; }
#nav-example-04 a {background:url(”/images/nav-final.jpg”) -352px -40px no-repeat; }
and remove the:
background:url(”/images/nav-final.jpg”) no-repeat;
from #nav-example, you can use padding a margin attributes in the #nav-example and still have the desired effect.
LOL if you add this sorry.
#nav-example-01 a {background:url(”/images/nav-final.jpg”) 0px 0px no-repeat; }
#nav-example-02 a {background:url(”/images/nav-final.jpg”) -98px 0px no-repeat; }
#nav-example-03 a {background:url(”/images/nav-final.jpg”) -229px 0px no-repeat; }
#nav-example-04 a {background:url(”/images/nav-final.jpg”) -352px 0px no-repeat; }
Good post! Will be one to bookmark and look over!
Another good thing about CSS sprites is that you can do columns easy as well
Thanks a lot for this tutorial,
but it would be very kind enough to you if you can suggest what should I do if I want to show the hover image after clicking on a link.
I mean to say suppose I click on the blog link I want to show the blog link selected.How will I do that?
Thanks & Regards,
Sharmily
Could someone please explain how to get a drop down working off this type of nav bar. Or direct me to somewhere that shows me how.
Thanks
Ross
I’m with Ross, could we please have the code to get a drop down working and also have the active page showing a different image.
Great blog, well done Alex
just read the comments and you will get part of what your asking for.
Just what I wanted!
Thanks for the guide!
Nice tutorial.
I made a tutorial similar to this, but it shows you how to incorporate it into Wordpress.
It might be helpful to some of the readers here:
That code seems a little long to accomplish such a simple task. I made a quick tutorial on how to incorporate images into your navigation menu. It also shows you how to use active and hover effects on your links. Let me know if this helps:
http://thedailytut.com/wordpress/an-image-wordpress-navigation-with-hover-and-active-links
Nice nav! I’m using it for my new website, soon to be online.
Thanks for the tutorial!
Grtz, Laurens
LaurensHonselaar.com
The Netherlands
Is there additional code I need for this that is not on here? I copied & pasted the HTML into an HTML file, then attached a style sheet with the pasted CSS code just to see if it would work, and it doesn’t work.
I just wanted to say thank you for posting this! I am a complete newb and was able to follow this and implement it for my vertical navigation design. (I am hacking a css template) I couldn’t get it to show in IE7 and reading the comments showed me where I had gone wrong…
Thanks again Alex!
Hi
I’m trying to implement this method for one button only! and i still can’t get it to work! i’m a little lost in the css part of it. The button i’m using has the text embedded so i don’t need to do anything with the font part of it. Its not a menu its just a button! aghhhh could you kindly let me know how i would do this for 1 button and not a menu pls. much appreciated thank-you.
Cheers Antz
Now after read this good tutorial, i much learn about images sprite. I will try for my Joomla css templates.
Very thanks for this greate tutorial
Thanks for share ! It’s great
I would recommend removing the spans as they are not necessary and using the text-indent: -9999px; command to move the link text off the page and keep it accessible to screen readers.
first very thank for this great tutorial.
Any body can help me how to put in php template for joomla menu posision module(change No.6 above),
any help very thanks full
Thanx for the very helpful info!
First of all I can’t believe there are still 2 people as of late 2007 who say things like “Tables are much easier” and “Some day I’ll use CSS” whoever they are, hopefuly they’ve seen the error of their ways by now.
Second for Antz: for your one button solution just use a background image on your anchor tag, then on hover reposition the image as above:
a.myButton { background (image.gif) 0 0};
a.myButton:hover {background (image.gif) 0 -40px};
you’ll have to replace your coordinates and this is over simplified but that’s the gist.
Cool idea, Will proberly use this sometime, Have bookmarked the page
This was amazing…finally i found what i was looking for….thanks for the tut…
Help! I am doing something wrong and I have no idea what. All I get to show up is a list of my links. I can’t see my image at all.
Hi,
I am still looking for some help on figuring out my problem. If anyone feels like helping me I would appreciate it.
Thank!
How difficult would it be to add one dropdown menu to this code with new links set up horizontally with one background image behind all 3 of the new links?
I enjoyed your page. Keep up the good work! Feel free to visit my page. It\’s cool too.e
Really I would like to appreciate for collecting all the steps about CSS and presenting at once in good manner.Really nice..
Very cool!
Thank you very much.
Best,
Lautus Design
Very useful, thanks.
Thanks dude.. i was searching for it…
thanks
Thanks dude.. i was searching for it…
thanks..
Is there any special trick to creating this as a VERTICAL nav bar? I’ve gone through the steps and made the changes that a VERTICAL nav would require, using width instead of height, etc. and I haven’t been able to get the rollover to work.
Hey,
Thanks for this wonderful CSS Menu Tips…
Regards
Surat web Design Studio
Synergy Informatics
hi Alex. Thanks alot for your tutorial! It is really useful, however I encountered a serious problem.. It is ok in IE but not in Firefox. It is working for the bottom navigation bar but not the top. Could you advise what gone wrong?
Would be really grateful if any css fellow could point out my error.
Interesting technique, but how do you combine this with a dropdown? I need that functionality for a website I am converting from tables.
Hi cool tutorial I am looking for something like this am just wondering if it works on IE and Firefox??
Great tutorial… am wondering if there is anyway to get rid of the link box around the image which comes up when you click in firefox??
CSS provides tons of useful functionality that we used to rely on Javascript to do. Image rollovers with CSS, as said, definitely provide a better UI than relying on javascript to do an image swap. Good article.
So this is great. But it doesn’t solve one sometimes important issue:
What if a user has images turned off? How do you account for that?
Thanks for sharing this.. very nice.. I can used this kind off css on my website projects. thanks again! keep it up!
I still prefer tables because it works on All browsers without hacking it. CSS will never work properly unless all browsers follow one rule to make it universal. Either that or everyone use Firefox instead of the very buggy Internet Explorer.
Hi,
i am new to css, and am a java developer. I integrated the CSS with HTML in a single .html file. But I am not able to get the images. here is the final single file: where I misses.
sample.html
#nav-example {
background:url(”http://localhost:8080/sample/html/nav-final.jpg”) no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}
#nav-example span {
display: none;
}
#nav-example li, #nav-example a {
height:40px;
display:block;
}
#nav-example li {
float:left;
list-style:none;
display:inline;
}
#nav-example-01 {
width: 98px;
}
#nav-example-02 {width: 131px;}
#nav-example-03 {width: 123px;}
#nav-example-04 {width: 138px;}
#nav-example-01 a:hover {background:url(”http://localhost:8080/sample/html/nav-final.jpg”) 0px -40px no-repeat; }
#nav-example-02 a:hover {background:url(”http://localhost:8080/sample/html/nav-final.jpg”) -98px -40px no-repeat; }
#nav-example-03 a:hover {background:url(”http://localhost:8080/sample/html/nav-final.jpg”) -229px -40px no-repeat; }
#nav-example-04 a:hover {background:url(”http://localhost:8080/sample/html/nav-final.jpg”) -352px -40px no-repeat; }
Blog
Portfolio
Resume
Contact
hi. like jen
i have followed this tutorial but i cant get it to work. the images dont display.
can anyone help. thanks
peter. just check image width.
For the Current State navigation use :
#nav-example-01.current {background:url(”/images/nav-final.jpg”) 0px -160px no-repeat; }
and also remove from navigtaion …
For the Current State navigation use :
#nav-example-01.current {background:url(”/images/nav-final.jpg”) 0px -160px no-repeat; }
and also remove link from navigtaion …
Really nice effect. I will definitely use it on a new site I’m working on. Thanks a bucket and good work.
Very nice tutorial!
I only ever use to use the “Sliding doors” method as I thought using one larger image would cause problems if the clients image server was under a large amount of load..turns out, that’s not the case xD
Thanks again =]
This is great & finally something which can be put to practice … u rock … cheers !!!!