Extending CSS Spriting

December 5th, 2008 by Jennifer Rogers

CSS Spriting is a technique for speeding up the load times for your website by reducing the number of HTTP requests for images to the server. On Yahoo’s best practices website, they say:

“CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.”

This technique can be extended for non-background images on your site as well. However, some issues arise when you use CSS spriting for your main navigation elements(among other images):

  1. You can’t attach alternate text to divs for accessibility purposes
  2. CSS Spriting and the IE6 PNG fix are incompatible
  3. The images will not print out on printouts unless the client option to print background images is selected (this is bad for logos and menus, etc)
  4. For images in pages (that are not actually background images), it seems semantically bad to hide the image in CSS.

With these concerns in mind, I devised a cross-browser compliant solution that addresses all of the aforementioned problems. The new technique uses an image tag, a div, and the CSS clip property.

Here’s the code for the technique:

The CSS
.menu-about { width: 106px; height: 29px; position: relative; top: 0; left: -293px; }
.menu-about img { position: absolute; clip: rect(0 399px 29px 293px); }

The HTML
<div class="menu-about">
     <img class="transparent_png" src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png" alt="About" title="About Us" width="611" height="39" /></div>

And here’s the code in action: [ view the full image ]

And here’s an alternate solution using the anchor tag:

Contact

This technique can be easily customized in many different ways. However, for repeating backgrounds and css mouseovers, the traditional CSS sprite techniques are better suited.

Update: As Dan pointed out in the comments, this technique can accomplish css mouseovers (I overlooked this possibility since my first draft of this article only used divs, rather than anchor tags). Thanks, Dan!

Reddit Plusone Facebook Twitter Pinterest Stumbleupon Tumblr Digg Delicious

73 Responses to “Extending CSS Spriting”

  1. Ajaxian » CSS Spriting without background-image Says:

    […] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the […]

  2. Dan Ott Says:

    Neat technique, I’ll have to try that out myself.

    I think you could probably manage css rollovers with this one. if you expanded your sprite to include rollover states, you could set top:-29px on the image (and overflow:hidden on the nav), and i think that would do it.

    Worth a look-see, anyway(:

  3. jlarson Says:

    awesome. i haven’t worked much with clip: css attribute, didn’t realize it works cross browser.

    ” the traditional CSS sprite techniques are better suited.” it cracks me up when I see people use ‘traditional’ regarding technology barely a decade old. still, i say it too.

  4. Marin Says:

    Hi Jennifer,
    Just saw the article on Ajaxians. Nice concept. It also support floating!
    Now let’s mix that with some alpha png’s :)

  5. jennyfofenny Says:

    Oh, good point, Dan. I think you’re right. In my first draft of this concept, I didn’t use anchor tags… but with the anchor tags, it definitely would work. Thanks!

  6. Mathieu 'p01' Henri Says:

    Back in 2000 we used to call that the Canvas-Sprites technique on http://www.Javascript-games.org. This technique has the advantage to allow sprites scaling as I documented in the technical informations of 3D TOMB II [1]. However I recommend not to use the CSS clip property as IE6- have a proprietary syntax for it. Prefer setting the parent in overflow:hidden; and positioning the IMG inside the canvas^Wparent element.

    [1] http://www.3dtomb2.com/technical_infos.php#sprites_rendering_and_animation

  7. Ajax Girl » Blog Archive » CSS Spriting without background-image Says:

    […] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the […]

  8. Mulasse Says:

    Yeah, it could be great…
    Is your image a part of your data here?
    I don’t think so, it has no sense in your document…

    How will you do when you’ll want to add an alternative design? I have blue interface, I wanna add a green one.

    I think you should have titled you post: “CSS Spriting with bad practices”.
    I also think you can forget IE6 compatibility in (almost) 2009, retards just have to update now, we can’t support it all our life because of dumbs.

    Use transparent gif instead of png to make Spriting compatible with IE6 is really better than using a bad web 0.01 practice.

  9. cravr Says:

    FYI yes the mouseover capability does work in IE6/7 but only when you set ‘background-color:transparent’ to the ‘a:hover img’?

    Great technique. Thanks!

  10. jennyfofenny Says:

    Mulasse: It’s true that this isn’t the be all, end all for CSS Spriting, it’s just another tool in the toolbox for creating fast, cross-browser compliant websites. So, if you’re only changing your website template with a stylesheet, then yes, this isn’t the solution for you (although most website template changes are more robust than that).

    As for the IE6 issue, you’re right that it’s *hopefully* going away. However, the fact of the matter is that for many e-commerce sites IE6’s numbers are still in the 35+ percentile (so it’s difficult to say when we’ll be able to completely ignore it – although I will celebrate that day with the rest of the web development community).

  11. 20081212 網摘 - JavaScript Language Abstractions - 網絡暴民 Jacky’s Blog Says:

    […] Extending CSS Spriting use normal img tag for CSS sprites […]

  12. Angus Turnbull Says:

    Cool technique!

    Just letting you know that as of v2.0, my IE PNG Fix script does support background-position and repeat, so you can use CSS sprites to your heart’s content :).

    I just tested your technique with the PNG fix and it worked fine too out of the box. Hope this helps everyone!

    Cheers – Angus Turnbull

  13. Technology Says:

    […] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the […]

  14. Glen Lipka Says:

    In aug, 2007 I had put together something similar with overflow:hidden.
    http://commadot.com/the-right-sprite/

    Its got a bunch of other techniques on that post too.
    I hope its helpful. :)

  15. dimodi Says:

    Smart, but WRONG. Mulasse says it all.

  16. Javascript News » Blog Archive » CSS Spriting without background-image Says:

    […] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the […]

  17. CSS Spriting without background-image | Slightly Nervous Says:

    […] Semter has published an article on CSS spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the […]

  18. css spriting ++ - Freelancers Club (fl-club) Says:

    […] Article on extending css spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the same effect as background image clipping. Why? […]

  19. Rupin Chheda Says:

    I think that if you extend this to multiple images,this would mean that I have to include the img tag everywhere,which means that I would be effectively making multiple calls for the same background image.Please correct me if am wrong.

  20. Rodrigo Says:

    I think that in this way is better:


    .menu-img { width: 106px; height: 29px; position: relative; }
    .menu-img img.about { position: absolute; clip: rect(0 399px 29px 293px); top: 0; left: -293px; }

    so I could use the class “menu-img” for all the sprites with the same size (for icons?) And just create one new rule for each sprite ;-)

  21. Friday Focus: 12/12/08 | Devlounge Says:

    […] – Extending CSS Spriting New CSS sprite technique that does away with background images and improve […]

  22. Usar una imagen como elementos de menú con CSS | ..: Cristian Eslava | Diseño Gráfico / Web | Maquetación | Formación :.. Says:

    […] Jennifer Semtner nos da una solución para cuando queremos utilizar imágenes como elementos de menú, una mejora a la técnica CSS Spriting con la que ahorramos tiempo de descarga al utilizar sólo 1 imagen, hacemos menos HTTP requests. […]

  23. Mark Perkins Says:

    Good work, and a clever technique… but my only problem is that, especially for navigation, I prefer to use html text within the link, which is then image-replaced to create something pretty.

    This gives google/screen readers a nice html text list and everyone else a graphical menu. Your option would only leave image-alt text to non-image capable browsers, which is not ideal IMHO.

    Drew Dillers’ ingenious alternative PNG fix for IE6 (http://www.dillerdesign.com/experiment/DD_belatedPNG/) supports background image position so can be used for sprites too, I recommend checking it out.

  24. Alireza Tajary Says:

    Nice.
    Thank you.
    But I see in the Yahoo developer network:
    http://developer.yahoo.com/performance/rules.html#css_expressions
    “Avoid CSS Expressions”

  25. jennyfofenny Says:

    Alireza: CSS expressions are something different; CSS properties (like clip or background, etc) are ok to use.

  26. Ruslan Says:

    Thanks Jennifer, it’s nice new technique of CSS Sprites!

    Recently, we have developed next generation method of CSS Sprites based on data:URI DURIS – Data:URI [CSS] Spites. Full automatic building of CSS Sprites. Will soon appear description on english.

  27. 使用 CSS Sprites 設計網頁但不用 background-image 的技巧 Says:

    […] Jennifer Semter 的部落格看到一則 extending css spriting 文章,他不再用 background-image 與 background-position 的技巧,改用標準的 DIV/A […]

  28. Daily Digest for 2008-12-12 | Pedro Trindade Says:

    […] Jennifer Semtner.com :: Web Designer / Developer » Blog Archive » Extending CSS Spriting […]

  29. 1errari Says:

    I saw how has been created css for top menu, and I think all background-position at a:hover should be changed by Y direction. Then you can set for items only width parameter and css for hover effect will be look like #menu a:hover{backround-position: 0 -30px;}
    Sorry for my terrible english :)

  30. Max Design - standards based web design, development and training » Some links for light reading (16/12/08) Says:

    […] Extending CSS Spriting […]

  31. Jonas Says:

    Mark Perkins: the problem with hiding html text and replacing it with background images is that Google can remove your site from the search results – see http://www.google.com/support/webmasters/bin/answer.py?answer=66353

  32. Lindsay Evans Says:

    I may be missing something, but this looks like it will be a complete mess if CSS is disabled – you’d just end up with the same image repeated.

  33. Ross Bruniges Says:

    As noted in a number of comments above this technique degrades horribly with CSS turned off.

    Equally the value for your image is going to be hardcoded all over the place in your HTML so changing the image could lead to unsightly results.

    Would therefore use this technique with caution.

  34. SBL clipping path services Says:

    I saw the creative writing. It is really informative. Thanks for sharing.

    Regards,
    SBL Graphics
    http://www.saibposervices.com/Clipping-path_services.aspx

  35. [Web] 連結分享 « 網站製作學習誌 Says:

    […] Extending CSS Spriting […]

  36. links for 2008-12-21 « boblog Says:

    […] Jennifer Semtner.com :: Web Designer / Developer » Blog Archive » Extending CSS Spriting CSS Spriting is a technique for speeding up the load times for your website by reducing the number of HTTP requests for images to the server. (tags: webdesign css html) […]

  37. Jenny Says:

    sourcearticle.info has a similiar post if anyone’s interested

  38. lugogeqa pornem Says:

    but for the fact that position. So hang on to!

  39. Ben Thompson Says:

    I found more here if anyone’s interested

  40. johnny Says:

    MCDfSe Thanks for good post

  41. chineseman Says:

    hi…

    Thank you! I would now go on this blog every day!…

  42. imobi Says:

    greatings…

    disagree…

  43. China man Says:

    greatings…

    Not sure that this is true) but thanks…

  44. alex Says:

    Great work I think you should have titled you post: “CSS Spriting with bad practices”.
    I also think you can forget IE6 compatibility in (almost) 2009, retards just have to update now, we can’t support it all our life because of dumbs,
    http://www.cyberdesignz.com/ , you can get more about CSS from this,

  45. web development company Says:

    Very informative and useful article. Thanks for sharing this buddy.

  46. Extended CSS Sprites for Foreground Images <img> | Make A Website Says:

    […] Jenny has also devised a technique for foreground image CSS sprinting which in essence bears all the merits of the original CSS Sprites method. […]

  47. Yang Yang Says:

    Well, I don’t know if you have tried it or not or if there’s something I’m doing wrong, but the hovering effect seems unachievable in IE and Opera.

    See the code and live demo here: http://www.kavoir.com/examples/jenny-css-sprites/menu.html

    In FF, Chrome and Safari, it’s all fine, but the hovering doesn’t work in IE and Opera.

    Any idea?

  48. jennyfofenny Says:

    Yang Yang – I went ahead and posted a solution to this problem ( http://www.jennifersemtner.com/wp-content/uploads/2009/1/menu.html ) and also posted the solution to stackoverflow ( http://stackoverflow.com/questions/434703/extended-css-sprites-not-working-with-hover#444051 ). The problem is that apparently IE (can’t vouch for Opera) won’t apply :hover effects to child elements (like img). In order to use your exact markup, I used the overflow property, rather than the clip property (however, both of those properties will have the same benefits and drawbacks).

  49. paul damdx Says:

    Perfect work!Keep posting

    ==
    http://loving-life.web-elite.com/site.map.php

  50. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials | CSS | Smashing Magazine Says:

    […] Extending CSS Spriting Jennifer Semtner extends the classic CSS sprites technique to non-background images and discusses what to consider when using CSS Sprites for the design. […]

  51. sowlfloorse Says:

    Hi, outgoing posts there :-) thank’s exchange for the gripping advice

  52. PureCSS » Blog Archive » 解密CSS Sprites:技巧、工具和教程 Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  53. CSS Sprites ++ - Web Development Resources Says:

    […] Article on extending css spriting, and a cross-browser technique that uses divs, anchors, and clipping to get the same effect as background image clipping. Why? […]

  54. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials « Ramesh Says:

    […] Extending CSS Spriting Jennifer Semtner extends the classic CSS sprites technique to non-background images and discusses what to consider when using CSS Sprites for the design. […]

  55. CSS Sprites: CSS图片合并技术详解 | 帕兰映像 Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  56. 行骏-IT Player » Blog Archive » 解密CSS Sprites:技巧、工具和教程 Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  57. 彬Go:CSS Sprites教程、工具介绍|于此问学 Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  58. Jennifer Semtner – Extending CSS Spriting / CSS for normal images » Andreas Mauf Says:

    […] Jennifer Semtner [ Web Designer / Developer ] » Blog Archive » Extending CSS Spriting […]

  59. WEB前端开发—Songxibin 's Blog » CSS Sprites: CSS图片合并技术详解 Says:

    […] Extending CSS Spriting […]

  60. 彬Go:CSS Sprites教程、工具介绍 Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  61. 解密CSS Sprites:技巧、工具和教程 | YAOHAIXIAO.COM Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  62. 解密CSS Sprites:技巧、工具和教程 (收藏) | blog.moocss.com Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  63. 解密CSS Sprites:技巧、工具和教程 - Dream step Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  64. CSS Sprites(CSS图像拼合技术)教程、工具集合 – 林若成中文官方网 Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  65. CSS Sprites w/out Using Background Images | Photoshop Tutorial Says:

    […] Extending CSS Spriting […]

  66. CSS Sprites(CSS图像拼合技术)教程、工具集合 > 米格——老姜辣味大,老人经验多 Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  67. 最全的CSS Sprites(CSS图像拼合技术)教程、工具集合 | 博客水木 Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  68. CSS Sprites(CSS图像拼合技术)教程、工具集合 | 极客说 Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  69. CSS Sprites: CSS图片合并技术详解 | VieKee's Blog Says:

    […] Extending CSS Spriting Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  70. 解密CSSSprites技巧工具和教程 | EvilCode 邪恶代码 Says:

    […] Extending CSS SpritingJennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。 […]

  71. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials - Goodfav Howto Says:

    […] Extending CSS Spriting Jennifer Semtner extends the classic CSS sprites technique to non-background images and discusses what to consider when using CSS Sprites for the design. […]

  72. Extended css sprites not working with :hover? | Ask Programming & Technology Says:

    […] just encountered this article of an extention of css sprites that enables the spriting trick with foreground images . I tried to […]

  73. Extended css sprites not working with :hover? | Ask Programming & Technology Says:

    […] just encountered this article of an extention of css sprites that enables the spriting trick with foreground images . I tried to […]