Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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 Death301. 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”. 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 clouds5.

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 example21, 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 TwinHelix27 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 ?hex=000000
  7. 7 ?hex=c4c4c4
  8. 8 ?hex=ea1d22
  9. 9 ?hex=309721
  10. 10 ?hex=005aa9
  11. 11 #
  12. 12 #
  13. 13 #
  14. 14 #
  15. 15 #
  16. 16 ?hex=000000
  17. 17 ?hex=c4c4c4
  18. 18 ?hex=ea1d22
  19. 19 ?hex=309721
  20. 20 ?hex=005aa9
  21. 21
  22. 22 #
  23. 23 #
  24. 24 #
  25. 25 #
  26. 26 #
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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

    Jakub Jarabica

    October 31, 2010 2:13 am

    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.


↑ Back to top