Menu Search
Jump to the content X

Transparent CSS Sprites


One of the most useful front-end development techniques of recent years is the humble “CSS Sprites”. The technique was popularised by Dave Shea on A List Apart in 2004 with his article CSS Sprites: Image Slicing’s Kiss of Death311. CSS Sprites are a relatively simple technique once you understand the fundamentals and it can be applied in all manner of ways. A common use is for a graphic intensive navigation, but it can also be useful for buttons or even styling headings with the corporate font.

Sprites are simply a collection of images which are merged together to create a single file. You then use CSS, changing the background-position the image, to display the correct part of the image you need. I often use the analogy of a large object passing a window — you only see what is within the frame.

Over the last couple of years CSS Sprites has been one of the most widely adopted CSS-related techniques. Popularised by the Yahoo’s research and documentation around speeding up your website2, many high profile websites implement the technique, including Google and Amazon. There are numerous tutorials3 which help you get to grips with the techniques and sprite generators4 which help you create the graphics themselves.

The Benefits and Potential Problems Link

CSS Sprites have become a de-facto way of improving the speed of your website or web application. Merging multiple images in to a single file can quickly reduce the number of HTTP requests needed on a typical website. Most browsers only allow for two concurrent connections to a single domain so although individual files can be large, the overall request and response times are considerably lower. Combining images with similar hues also means the colour and compression information is only need once, instead of per file, which can mean an overall reduced file size when compared to the files individually.

The benefits of reduced file size and HTTP requests are often publicised, but potential problems are rarely ever discussed. One of the main techinical issues with CSS Sprites is memory usage which is explained in the article “To Sprite Or Not To Sprite”5. Another issue is the maintenance of the sprites, the images and the CSS, both of which can become rather complicated.

A Technological Solution Link

A common practice in solving slow-down in computing seems to simply throw in more hardware. We all know hardware prices are dropping all the time, so this seems like a reasonable solution. However, I feel there is a fundamental flaw with this philosophy and ingrained mentality. Developers have access to more computing power and as such they code their applications to be handled in these environments. With each new feature the application becomes slower and slower, but this problem has already has a solution — upgrade your hardware. This is an endless cycle.

Many of the user interfaces people come across today are on the Web. This means the user has to download most of the related material (images, CSS, JavaScript) before interacting with the content, so the same philosophy must be applied to the Web. Websites, or more recently web applications, are becoming more complex, even replacing many desktop applications, therefore the user must first download more and more information before beginning their experience.

Although file sizes required to view a website have increased dramatically over recent years, more and more people are upgrading their Internet connections, with broadband becoming the norm in many countries. This cycle conforms to the hardware upgrade philosophy and in theory should negate any potential user experience problems.

However, web developers are falling in to the same trap which many application developers have before. As layouts become more complex, more images are required and so the developer creates more images — even if they are sprites. This seems like a reasonable assertion, but it doesn’t mean it is the best solution.

A Twist on the Technique Link

Due to the limitations of the Web, there have been many inventive solutions to problems. But the Web isn’t the only place where there can be very tight limitations. Innovation strives on limitation. A great example of this was in the iconic game Super Mario Brothers where the bushes were just recoloured clouds6.

This very simple but extremely effective implementation made me think about how to reuse common interface elements, trick the user to believe something the same is different!

Now on to the twist, this idea is to create a transparent sprite allowing the background-color to show through. If you are familiar with CSS Sprites, you should be able to grasp this twist relatively easily.

Simply, an image with a transparent “knocked-out” transparent center is placed over a background colour. Changing the background colour changes the appearance of the element. The only thing you need to pay attention to is that the colour surrounding the transparent part of the image matches the background in which you are using the techinque. This stops the background colour bleeding in to other parts of your image.

Anyway, this technique is much easier to understand in an example…

Example Link

The following example is only made up of three images. One for all the font samples, one image for both sets of droplets, including hover and active states, and one for the all buttons.

The Images Link

The font image contains transparent typefaces on a white background, meaning they aren’t viewable on a white background. Save the file from the example22, open it in your favourite graphics editor and you will see the transparent typefaces.

The drops image is used on the example above as the colour picker. A single graphic containing the gradient drop on the two different backgrounds, so the background-color is masked out correctly. The image contains all three states used in modern interactive interfaces — static, hover/focus, pressed/active.

The button technique is the most flexible and probably most useful way to use this technique. A simple sprite image containing two states — static and hover/focus — which is then placed over text to create the button. Simply adding a background-color will make every use of this button the same style across your application or website.

Below is some CSS which styles simple fixed width buttons with a grey background colour, but also has two different treatments, “warning” and “go”, which have red and green background colours respectively.

a.button {
  display: block;
  width: 80px; height: 30px;
  margin: 0 20px;
  font-size: 14px; line-height: 30px; color: #fff;
  text-align: center; text-decoration: none;
  background: #4a4a4a url(button.png) no-repeat 0 0;
a.button:active {
  background-position: 0 -40px;
a.button.warning {
  background-color: #ea1d22;
a.button.go {
  background-color: #309721;

The CSS above produces the following buttons:

Conclusion Link

This techinque could be useful when providing a range of themes for a website. You could create one set of buttons and icons then add the background colour which best suits the selected theme.

Although this technique will never be as broadly useful as the original CSS Sprites, the idea can be useful for websites which allow user theming. The technique could also be used when creating HTML mockups, allowing you to easily update colours based on client feedback.

The main benefit this technique has is that it reduces the number of HTTP requests. But it also reduces browser memory usage compared with what would be needed if you created a larger sprite to handle all the colours you need.

I would like to mention one caveat though, IE6, because it does not natively support transparent PNGs. There are PNG fixes, but none1 of these support background-position which is needed if you are using this technique with CSS sprites, such as with the buttons and droplets above. However, you could provide a slightly less optimal experience using GIFs instead.

1. The IE PNG Fix from TwinHelix28 does include support for background-position, but the solution requires JavaScript.

Further Resources Link

If you are interested in any aspect of CSS Sprites, check out the following extra resources.

Below are a list of links used within the article:

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7 ?hex=000000
  8. 8 ?hex=c4c4c4
  9. 9 ?hex=ea1d22
  10. 10 ?hex=309721
  11. 11 ?hex=005aa9
  12. 12 #
  13. 13 #
  14. 14 #
  15. 15 #
  16. 16 #
  17. 17 ?hex=000000
  18. 18 ?hex=c4c4c4
  19. 19 ?hex=ea1d22
  20. 20 ?hex=309721
  21. 21 ?hex=005aa9
  22. 22
  23. 23 #
  24. 24 #
  25. 25 #
  26. 26 #
  27. 27 #
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34

↑ Back to top Tweet itShare on Facebook

Trevor Morris a twenty-something web developer based in the Midlands, UK. He is fluent in both front- and back-end coding, and develops usable and accessible front-end interfaces using web standards. He is freelancing at Surface, occasionally writing about the web and always rating movies on his personal site but for more up to date commentary you can follow him on Twitter. He is also a prominent member of the The Multipack, a community of multi-talented Web professionals from across the West Midlands, where he helps to organise the “Presents” talks and the free yearly event Geek in the Park.

  1. 1

    Good article and interesting technique. Alas, I try to stay away from PNG’s simply because of IE6.

  2. 2

    In your article you say

    “Most browsers only allow for two concurrent connections to a single domain”

    This may have been true in 2004, but isn’t anymore. See for example Steve Souder’s »Roundup on Parallel Connections« from March 2008:

  3. 3

    You don’t have to try stay away for the IE6 png problems there are a lot of solutions available on the internet to tacke that problem.
    Take for example:

  4. 4

    With DD_belatedPNG you are safe using transparent PNGs in IE6 :)

  5. 5

    My website uses this technique as key design element (+ mixes it with color transitions).

  6. 6

    @Adam: IE6 users are by now used to websites simply not working for them, or in the best case looking “corrupted”. Unless a client specifically demands a layout that is optimized for IE6, I feel that non-transparent PNGs are a trivial problem for IE6 users. Even on our government website (aimed at non computer-literate minorities) IE6 use is as low as 3%!

  7. 7

    IE6 PNGFIX is a great way to use png in your projects when you want it to be IE6 compliant. Png’s without the alpha channel you can use without the pngfix sollution.

  8. 8

    Yesx this is a great technique to use. I create scalable web apps that can be branded to different colors depending on the client, and this technique makes it so I don’t have to change the icons with each color change, just adjust 1 line of CSS.

  9. 9

    @adam the IE6 PNGfix doesn’t take long to install at all.

  10. 10

    Cool technique! The single image droplet alone was worth the post. Thanks for sharing.

  11. 11

    I prefer not to use images for layout style if I can, but this could be a great idea, particularly, as you said, for interchangeable themes. Seems to give the designer more power, even if they only ever used it in a testing environment.

    Thanks for the article!

  12. 12

    this is nothing new

  13. 13

    The IE6 PNG fixes don’t let you position the background image so CSS sprites don’t work in that situation

  14. 14

    Thanks for css sprite generator. I thought spriteme was the only tool out there until now.

  15. 15

    IE 6? Who cares about IE 6. Force your users to upgrade and stop encouraging them to use of an outdated browser with security vulnerabilities. Come on man. IE 9 is about to be released and you’re still try to support IE 6? Take a clue from google.

  16. 16

    I may need to read this again. I’ve used either id and id:hover with background urls and negative margins or the classic sprite technique with bg position but always with PNGs, which I make transparent. How is this new then?

    Like I said, what do I know, I have to instapaper this and come back ;)

  17. 17

    The image from your link to the super Mario game has gone. You can still find it in Google though.

  18. 18

    We have thought about this technique a few months ago for our website, to create themes to suit the customer’s colors. But a lot of our website’s visitors have to suffer corporate policies, which require the unfortunate use of IE6 (it’s still 20%)

    So this wouldn’t work, It is a great technique though, but everthing will be more or less monochromatic, you can use everything from white to black and a color.

  19. 19

    I use this a lot of my interface such as buttons. It’s just a gradient but with no color so you can easily specify it in the CSS.

  20. 20

    Indeed. It’s presented as an innovation or other new stuff, but I used it before and I have seen it on other websites a long time ago.

  21. 21

    We used to use the same technique with transparent GIF’s back in 2001 on a site that used white backgrounds to give us rounded corners on boxes of different color.

    I.e. the gif would be divided into two by a curve on it that was half-white, half-transparent – one image per corner. These four little images would let us get aliased curves for a all corners of a box of any colour providing it was sitting on a white background.


  22. 22

    It’s hard to force most corporations to upgrade their web browser. My wife works for a very large international company, they all still use IE6.

  23. 23

    Peter –
    I agree. At this point, designing for IE6 (using an IE6-specific stylesheet) should be limited to making the sure the needed information is clearly available. Don’t cripple good design for current browsers by forcing IE6’s limitations on it! And I say this as someone who still uses IE6 on one home machine.

    P.S. – I meant to vote your comment up, but clicked the thumbs-down icon by mistake. Please add 2 to your thumbs-up score.

  24. 24

    Not much I can do when for example a client that sells services to hospitals requires it because of the number of out dated intranets that run on IE6.

    I think I should have mentioned I am aware of all the PNG fixes, but I’ve had issues with them being buggy and thats why I usually avoid them. That’s all.

  25. 25

    My sentiments EXACTLY.

    I’m so sick and tired of supporting that pitiful excuse of a browser (IE6) And when I hear Microsoft is CONTINUING to add proprietary crap into IE9, there simply is no excuse they can give that would disprove that they are not about advancing and standardizing the web.

    I have no qualms losing whatever business I do because I don’t support that pitiful archaic browser.

  26. 26

    I’ve used sprites on a movie trivia site I’ve been working on ( Rather than transparency though, I’d rather have animated gif sprites. Haven’t really figured out a good way to put those together. Would be very useful.

  27. 27

    Never really thought of using sprites that way.
    I always had 3-4 variations of the same image within the sprite.
    I guess this is shaving a little more off this size of the file
    – will give it a try on next calling for a sprite


  28. 28

    I appreciate the effort to write the article, and doubtless it is intended for “the next generation” of web designers / developers i.e. those just really getting started with “advanced” (it’s a relative term) CSS techniques.

    That said, I’m always a bit disappointed when I see an article like this, which is really just rehashing well-documented techniques without giving due attribution to the true pioneers and though-leaders in our industry who originally forged these techniques two to five years ago (or longer).

    Granted, you mention Dave Shea and his landmark article on CSS Sprites – from waaaay back in 2004. But indeed the basic transparency concepts discussed in this smashingmagazine article have been verbosely covered elsewhere already… by the folks who forged them.

    To wit:
    * damn, even SmashingMagazine itself in 2008:

    Yes, this latest article takes those ideas and adds a “twist”… sorta. And hey, like I said it’s great to introduce the concepts to folks who aren’t yet familiar with them.

    Just give credit where credit is due. We are standing on the shoulders of giants. Proper attribution is the least we can do.

  29. 29

    Bad habit, IE6 is dead and shouldn’t receive any attention anymore …
    The faster webdesigners left out this obsolete browser, the faster he will be gone.

  30. 30

    Good article.
    SM always gives good articles, but i am a little disappointed to always find that “off topic’ thing in every post. I think SM is extremely popular and they do not need these spam (not intended to be offensive) kinda things. While there is an ad that informs about a particular thing, why do you need to make a great article look not so great. Again, this is just a suggestion. Good things will always get buyers.

    I love SM. :)


↑ Back to top