Image Sprite Navigation With CSS

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.

Sprite Nav Without Hover State

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.

Sprite Nav Hover State

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.

Sprite Nav Canvas Resized

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.

Sprite Navigation Combined

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="#">Blog</a></li>
    <li id="nav-example-02"><a href="#">Portfolio</a></li>
    <li id="nav-example-03"><a href="#">Resume</a></li>
    <li id="nav-example-04"><a href="#">Contact</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 li, #nav-example a {
    height: 40px;
    display: block;
}

#nav-example li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

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

11. #nav-example li { float:left; list-style:none; display:inline; text-indent: -9999em; } – 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. The text-indent is what will hide the text off the page so all you see is the image. Make sure you don’t try to sneak keywords in here, if the almighty Google finds out you could get penalized.

12. #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.

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

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

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

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

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

273 thoughts on “Image Sprite Navigation With CSS

  1. 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 ;)

  2. 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??

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

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

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

  6. @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-

  7. Pingback: links for 2007-10-28 | SOJo: Student of Online Journalism

  8. 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 ;)

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

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

  11. 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! ;)

  12. 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!!!

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

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

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

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

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

  18. 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?

  19. 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. :(

  20. Pingback: CSS Sprite Technique Samples | DESIGNwalker max

  21. 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?

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

  23. 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!

  24. 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!

  25. Pingback: 45 Photoshop Tutorials for Better Navigation | Vandelay Website Design

  26. Pingback: DeDestruct And Other Kinds of Awesomeness

  27. Pingback: 45 Tutoriais Photoshop para Itens de Navegação | RuanWeb

  28. 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??

  29. @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

  30. 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!

  31. 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!

  32. Pingback: CSS Sprite?????? | DesignWalker

  33. Pingback: Using CSS to Do Anything: 50+ Creative Examples and Tutorials

  34. Pingback: 50???????CSS????? | ????

  35. Pingback: KMC | Web & Internet Teknolojileri Günlü?ü » CSS ile 50′den Fazla Yarat?c? Örnek ve Makale

  36. Pingback: Image Sprite Navigation Using CSS | White Sands Digital

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

  38. Pingback: Using CSS: Tutorials And Examples | Belive Blog

  39. 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 :)

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

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

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

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

  44. Pingback: Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design

  45. Pingback: Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design

  46. Pingback: Sélection de sites pour ressources CSS | blog de calii.fr

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

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

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

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

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

  52. Pingback: Una única imagen (sprite) para todo un menú interactivo en CSS - elWebmaster.com

  53. 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!

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

  55. Pingback: Indiscripts » Blog Archive » FF: Minimizing HTTP Requests

  56. Pingback: Image Sprite Navigation With CSS - Blue Box Sols

  57. Pingback: Edge Design » Blog Archive » How larger images can speed up your website

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

  59. Pingback: Jade Nellans’ Illustration Blog » Blog Archive » Reworking Site in CSS

  60. 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?

  61. Pingback: Optimize Loading of Hover Images with CSS / Photoshop Techniques

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

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

  64. Pingback: CSS Sprite - maakt je leven (en site) gemakkelijker!

  65. 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??

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

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

  68. 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 …

  69. Pingback: Tools - CSS Image Sprites — phpgamespace.com

  70. Pingback: First Grunge Design « Michael’s Blog

  71. Pingback: Image Sprite CSS Navigation - Same Image Hover State - Tutorial | CSS Tutorials - CSSHelper.net

  72. Pingback: CSS-Sprites Quellensammlung

  73. Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | CSS | Smashing Magazine

  74. Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials ??

  75. Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

  76. Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials « LocalLab : Foire aux Infos

  77. Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | Designurimagination Blog - Let Your Imagination Fly

  78. Pingback: ??CSS Sprites?????????| ????????????????????????| ??de??

  79. Pingback: ??CSS Sprites????????? | 1px left|?1??

  80. Pingback: 45 Photoshop Tutorials for Better Navigation « Online Free Application Software Tips Tools Wallpapers

  81. 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 =]

  82. Pingback: 40+ Better Navigation Tutorials | Free Tools And Wallpapers

  83. Pingback: PureCSS » Blog Archive » ??CSS Sprites?????????

  84. Pingback: Creating an Image Sprite Navigation with CSS - Tutorial Collection

  85. Pingback: » 50???????CSS????? | ???

  86. Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials « Ramesh

  87. Pingback: 50???????CSS????? | ????

  88. Pingback: FF: Minimizing HTTP Requests « Whimsical.Nu

  89. Pingback: CSS Sprites: CSS???????? | ????

  90. Pingback: JIRA: Zend Framework

  91. oye pendejo tus porquerias de tutoriales no sirven te lo digo en español por que yo me tube que chingar leyendo tu mierda de tutorial en Ingles.

    ah, hijo de puta antes de publicar cualquier tipo de post primero verifica que salga bien, y no hagas perder el tiempo engañando a la gente.

  92. Pingback: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | 9Tricks.Com - Tips - Tricks - Tutorials

  93. Pingback: 45 Photoshop Tutorials Of Better Navigation | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money

  94. Pingback: 45 Photoshop Tutorials for Better Navigation | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money

  95. Thanks so much for the tutorial! I am really excited to find this. I was wondering (hope this isn’t a silly question) if the same technique would apply if the navigation was vertical and the image slide right to left, rather than top to bottom? I was thinking this would just be a matter of defining the measurements differently and changing the display to list? I wanted to see if anyone had any opinions?

  96. Pingback: ??CSS Sprites?????????

  97. I love this sprites – but as the comments before mentioned, I can’t get the active state working – so if I have a 3 state button it works mouse over – but the li.active or so does not work and can’t find a good tutorial yet.

    thx
    Heiko

  98. Hi, Your tutorial is simple and cool, thanks. I’m having a similar problem as someone above in that my image only shows on rollover. I tried adding “background:none;” where you suggested. I swear I have this set up right. Any ideas?

  99. Pingback: ??-IT Player » Blog Archive » ??CSS Sprites?????????

  100. Pingback: Designprocess – Navigation « disastrous disaia

  101. Pingback: HTTP zahtevi za slikama iz CSS fajla

  102. Pingback: ??Sprite????? - Flash??

  103. I don’t understand the CSS lines:
    #nav-example {
    background:url(“/images/nav-final.jpg”) no-repeat;


    What is the ‘nav-final.jpg’? This is the only reference to it.

  104. Really fabulous tutorial.
    One question you have:
    #nav-example li, #nav-example a {
    height:40px;
    display:block;

    and then you have:
    #nav-example li {
    float:left;
    list-style:none;
    display:inline

    for #nav-example li both display inline and block?

  105. Pingback: CSS Sprite ??? | WebLab

  106. Pingback: 45 Photoshop Tutorials for Better Navigation « HUE Designer

  107. Pingback: CSS Sprites(CSS??????)??????? | ????WP3test

  108. awesome nav… has been a part of one of our clients’ sites for some time now and works beautifully in every browser EXCEPT internet explorer. any way to correct these bugs?

  109. Pingback: ?Go?CSS Sprites???????|????

  110. Pingback: Create an apple style menu and improve it via jQuery

  111. Pingback: Create an apple style menu and improve it via jQuery | Kriesi.at - Wordpress Themes and HTML Templates

  112. Alex,

    Thank you for taking the time to explain this. I have “struggled” through this on two sites and finally understand why and how this works.

    Well done!

  113. Thank you for the ONLY example that this css newbie could understand and replicate. I am eternally grateful for your play-by-play explanation!

  114. QUESTION…Everything looks prefect and works perfectly in my dreamweaver live view but when i go to a preview in FF and Safari the menu is not visible. It is there though because when i hover over where the menu should be the mouse arrow turns to a hand and is clickable.

    does anyone know whats going on?

    thanks for the tutorial i love this menu option!

  115. Hi thanks for this tuto.
    Someone knows why my image is not dysplays as link, when a pass my mouse over the imange nothin happen?

    thanks

  116. Pingback: my website needed columns…and rollovers… so that’ s what i did… well, tried to do. « When I grow up I wanna be…

  117. Pingback: ?Go?CSS Sprites???????

  118. Pingback: ??CSS Sprites????????? | YAOHAIXIAO.COM

  119. Pingback: 21 Must See CSS Sprites Tutorials | stylishwebdesigner

  120. Pingback: ??CSS Sprites????????? (??) | blog.moocss.com

  121. Pingback: Sprite Navigation Exercise | Web Campaign 300

  122. Pingback: ??CSS Sprites????????? - Dream step

  123. Pingback: Using css to do anything 50 creative examples and tutorials - NAGPUR CITY

  124. Pingback: 50+ Creative Examples and Tutorials Using CSS | Webwibe

  125. I tried this and it ALMOST worked. I fixed the problem there and now the image will not display at all! I am using an image of my own and have all of the correct information in. I cannot figure out what is wrong.
    Please Help!

    #nav-example {
    background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) no-repeat;
    width:600px;
    height:40px;
    margin:0;
    padding:0;
    float: center;
    }

    #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: 70px; margin: 90px;}
    #nav-example-02 {width: 70px;}
    #nav-example-03 {width: 90px;}
    #nav-example-04 {width: 70px;}
    #nav-example-05 {width: 110px;}

    #nav-example-01 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -90px -40px no-repeat; }
    #nav-example-02 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -160px -40px no-repeat; }
    #nav-example-03 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -230px -40px no-repeat; }
    #nav-example-04 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -320px -40px no-repeat; }
    #nav-example-05 a:hover {background:url(“http://backyardsocial.biz/images/BYS_Web_Header_Final.jpg”) -390px -40px no-repeat; }

  126. I would think this would be obvious. That is why the world has virtually thrown away the AGW conclusion–how much is made up? Who knows, so it’s all suspect.

  127. By far the most precise and new information I located on this issue. Really delighted that I navigated to your web site by luck. I’ll be subscribing to your blog so that I can acquire the up to the minute news. Appreciate all the knowledge here.

  128. Pingback: Create an apple style menu and improve it via jQuery | WPsharing

  129. Pingback: jane-vision?????|???????

  130. It was good and I got to know few good things.
    I have also created a CSS sprite for my site at: http://kunals.com. Here, you can see an image on top left..here I have used this CSS sprite as painting.

    One can move cursor over this image and it will turn into colored picture.

  131. I am having a little trouble getting this to work… I am doing a variation of the tutorial using four smal images that change positions only on the y axis.
    Here’s my HTML:

    ABOUT
    RESOURCES
    AREAS OF PRACTICE
    CONTACT

    and Heres my css:
    @charset “UTF-8″;
    /* CSS Document */

    #navigation {
    margin: 0px;
    padding: 0px;
    height: 40px;
    width: 1024px;
    list-style-type: none;
    }
    #navigationli, #about {
    height: 40px;
    width:256px;
    display: inline;
    background-image:url(../images/spritenavigation_01.gif);

    }
    #navigationli, #resources {
    height: 40px;
    width:256px;
    display: inline;
    background-image:url(../images/spritenavigation_02.gif);
    }

    #navigationli, #areasofpractice {
    height: 40px;
    width:256px;
    display: inline;
    background-image:url(../images/spritenavigation_03.gif);
    }

    #navigationli, #contact {
    height: 40px;
    width:256px;
    display: inline;
    background-image:url(../images/spritenavigation_04.gif)
    }

    #navigation li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
    }
    #contact li a:hover {
    background-image: url(../images/spritenavigation_04.gif);
    background-position: 0px +40px;
    }

  132. This tutorial was posted back in 2007 and it is still applicable to this day. Thank you Mr. Mr. Alex Hackbart your tutorial is so awesome that I was able to use it on my Footer Navigation thereby saving me some Javascript on my website. Your method wasn’t even mentioned in my book “Web Design All in One for Dummies. Long live to you sir.

  133. Great tutorial Alex! I was able to implement CSS Sprites for my menu bar following your tutorial and modifying it a bit – I created a widget box for the menu bar. However, I have a small issue- there is a small sliver of the hover image appearing at the top of my sprite menu bar and I can’t get rid of it. I have tried messing with margins, padding, and display block heights but it is still there. Would you mind cruising over to my site and giving me ideas on how to fix it? I have been at it for a while and just cant figure it out/ I kept the sprite names nav-example and the widget is HTML5. Any help is appreciated!

  134. Hey, thanks for this awesome little tutorial. Now, I am running into a bit of a problem when I want it to automatically scale to the web browser window size: I can’t get it to work! Does anyone have any idea on how this could be solved in a good way? Code below:

    @charset “UTF-8″;

    img {
    max-width:100%;
    }

    #nav {
    background:url(“images/navbar.png”) no-repeat;
    /*background-size: 100%;*/
    max-width:100%;
    height:100px;
    margin:0;
    padding:0;
    }

    #nav span {
    display:none;
    }

    #nav li, #nav a {
    height:87px;
    display:block;
    }

    #nav li {
    float:left;
    list-style:none;
    display:inline;
    }

    /*#nav-01 {width:16%;}
    #nav-02 {width:17%;}
    #nav-03 {width:18%;}
    #nav-04 {width:18%;}
    #nav-05 {width:17%;}
    #nav-06 {width:14%;}*/

    #nav-01 {width:306px;}
    #nav-02 {width:322px;}
    #nav-03 {width:343px;}
    #nav-04 {width:343px;}
    #nav-05 {width:318px;}
    #nav-06 {width:267px;}

    #nav-01 a:hover {background:url(“images/navbar.png”) 0px -97px no-repeat;}
    #nav-02 a:hover {background:url(“images/navbar.png”) -306px -97px no-repeat;}
    #nav-03 a:hover {background:url(“images/navbar.png”) -628px -97px no-repeat;}
    #nav-04 a:hover {background:url(“images/navbar.png”) -971px -97px no-repeat;}
    #nav-05 a:hover {background:url(“images/navbar.png”) -1314px -97px no-repeat;}
    #nav-06 a:hover {background:url(“images/navbar.png”) -1632px -97px no-repeat;}

    /*#nav-01 a:hover {background:url(“images/navbar.png”) 0px -97px no-repeat;}
    #nav-02 a:hover {background:url(“images/navbar.png”) -16% -97px no-repeat;}
    #nav-03 a:hover {background:url(“images/navbar.png”) -33% -97px no-repeat;}
    #nav-04 a:hover {background:url(“images/navbar.png”) -51% -97px no-repeat;}
    #nav-05 a:hover {background:url(“images/navbar.png”) -69% -97px no-repeat;}
    #nav-06 a:hover {background:url(“images/navbar.png”) -86% -97px no-repeat;}*/

    #banner {
    max-width:100%;
    }

    #wrapper {
    max-width:100%;
    }

  135. Pingback: lies, damn lies, and (sorta) statistics « adventures in cubing

  136. I tried this, and I cannot get the hover to work. In Dreamweaver it works, but when I open the html file in a browser, I don’t get the hover effect. Anyone have any idea why this is happening? I’m completely stumped.

  137. Is there a way to make the image stay (on the color reserved for ‘active’) active until another navigation link is selected? I want the selected image link to stay a different color that the other navigation images, so users know which page they are on. Online tutorials I’ve seen only show two states ‘active’ and ‘hover’.
    Great tutorial!

  138. Pingback: CSS????? | web?????????????

  139. I am trying to make a drop down menu that uses a sprite for the main navigation bar, but not for the sub-menus. When I try to get mine to work it will show the “hovered” version of the sprite for each item as I hover over them. Any help?

  140. I am following this tutorial to a certain extent. I am interested in using this technique for my e-portfolio. I am using my personal logo as my navigation bar. Which looks like an acrylic paint pallet for the arts in other words like so:

    Can I use this method if the buttons are not linear? How would I create an effective code, to use a variation of the above PNG file(s), as a navigation pallet for my website?

    Other info that might be useful: I am using Adobe Dreamweaver to create the site. Also I have used a code where the pallet is located on the left side of the page in a fixed position. Any help would be awesome, I am an amature who is slowing teaching myself to comprehend css and html coding. Thanks, Ms. Teale Miller.

  141. I do agree with all the ideas you have offered in your post.
    They are very convincing and will certainly work.
    Nonetheless, the posts are very brief for novices.
    Could you please extend them a bit from subsequent time?
    Thank you for the post.

  142. Also video games arcade races have had great success because
    they try to uphold the entertainment and amusement to reality.
    Daytona USA did to the arcade racing world what Street Fighter 2 did to the fighting genre.
    Now let’s compare where we find stickman videos with where we can find stickman games.

  143. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now
    each time a comment is added I get three emails wwith the ame comment.
    Is there any way you can remove me from that service?
    Thank you!

  144. My acupuncture induce labor challenge today, we only select the right serviceA funeral
    service. Such a decision that’s good for you. Joe Dean Cooper, Wyatt
    Cooper, pictured in her casket were published on National Enquirer.

    Feel free to surf to my website :: homepage,
    Glenda,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>