Transparent CSS Sprites

The Benefits and Potential Problems

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

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

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

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…


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

The font image contains transparent typefaces on a white background, meaning they aren’t viewable on a white background. Save the file from the example, 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.

01 a.button {
02 display: block;
03 width: 80px; height: 30px;
04 margin: 0 20px;
05 font-size: 14px; line-height: 30px; color: #fff;
06 text-align: center; text-decoration: none;
07 background: #4a4a4a url(button.png) no-repeat 0 0;
08 }
09 a.button:hover,
10 a.button:focus,
11 a.button:active {
12 background-position: 0 -40px;
13 }
14 a.button.warning {
15 background-color: #ea1d22;
16 }
17 a.button.go {
18 background-color: #309721;
19 }

The CSS above produces the following buttons:

28 Comments to “Transparent CSS Sprites”

  • Choosing a green website Host » Transparent CSS Sprites « Om Net Solution November 11, 2010 at 2:24 pm

    […] the original here: Transparent CSS Sprites « Om Net Solution Related Posts:WordPress Blog Services – Transparent CSS Sprites CSS Sprites have become a […]

  • Ron Tedwater November 13, 2010 at 9:51 am

    Thanks for the post

  • Lucius Picasso August 17, 2011 at 11:14 am

    Fantastic examine, I just approved this particular upon your colleague who was simply executing a bit of research for that will. And the man really obtained myself lunchtime because I uncovered that for the pup giggle Therefore i can rephrase that will: Thank you for lunch!

  • Amalia Straughan November 4, 2011 at 9:41 am

    Can I simply say what a relief to search out somebody who truly knows what theyre talking about on the internet. You positively know find out how to carry a difficulty to gentle and make it important. Extra folks must learn this and understand this aspect of the story. I cant believe youre not more fashionable since you undoubtedly have the gift.

  • Natural November 23, 2011 at 2:07 pm

    For these good reasons, celebrities are typically the most sought-soon after subjects for caricatures. Accept this truth, if you want to be a caricaturist. There isn’t significantly position generating funny caricatures of your sweetheart, dad and mom, buddies, and pets. In selected cases, an unpredicted caricature may even lead to a wounded moi – specially if the matter belongs to the fairer sex!

  • "Kontrol X1" February 22, 2012 at 7:18 pm

    Valuable info. Fortunate me I discovered your site unintentionally, and I am stunned why this twist of fate did not happened in advance! I bookmarked it.

  • Mr SoLo DoLo August 4, 2013 at 11:54 am

    I just don’t get it.
    I know css like the back of my hand but this is a first time for css sprites.

    I read on one site to line the sprites in photoshop from top to bottom, with 1px in between each image.

    Then I read on another site to put the sprites directly next to eachother and fill the image.

    Then I read on another site about using left: to line the sprites up right next to eachother on a page which is something I don’t want to do.

    I have an entire website already made and i’m trying to speed up the loading time by using css sprites.
    I want the images exactly where they already are in my website, except I want them to call from the sprite image instead of individual images now.

    How exactly do I call the exact pixel dimensions out from eaxh image in my one main sprite image?

    Details please, thanks

  • josh12rox August 16, 2013 at 5:27 am

    Hi, I’m trying to style my a search box for my website using Css. The goal is when the textbox is focused, the background will change to a lighter color. So I’m combining CSS sprites and the :focus selector. I can get it to work seperately, but my problem is changing another element’s properties when one element is selected.

    Here is my code:
    background:url(‘globalsearch_field.png’) 0 0;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    input.loginbox:focus div.loginboxdiv
    background-position: 0 -20px;

    So loginboxdiv sets the background image to the textbox, and loginbox is just the textbox (I know it’s named funny; followed a tutorial for testing purposes and was too lazy to change the name). How can I change loginboxdiv’s background when loginbox is focused? Right now nothing happens (background stays the same). Can anyone shed some light on this?
    Here is my HTML

    Hi thesnoopy, been great help though could you explain “append” ? Sorry :/ (tried googling not much success either).

  • The Beatles August 16, 2013 at 5:55 pm

    yahoo has done a css sprite for image compression.. where can i find anything like that? Thanks

  • unbleevable39 August 20, 2013 at 11:35 am

    Hi, I want to create a simple social sharing widget for my blog. I am currently using share-this widget. But for some reason I don’t want it. It is too slow in loading and increase page load time too much.
    So I decided to go with a simple widget but without any Java script.
    Now what the problem I am facing is I have created CSS sprite images but I dont know what “href” string i should enter for each social media like twitter, Facebook, Google plus, pinterest and Linkedin.

    The requirement is, if someone want to share the post to twitter, and when he click on the tweet button, the the URL of page and the title of the post should automatically go to the tweet.

    I tried using


    but it only gives URL of the source page and not the post title. Same is the case with Facebook. When I click on the Facebook share button, only blank share popup opens.
    Please help me .
    I tried searching many websites but everywhere they have just copy pasted the non working code.


  • ouch August 25, 2013 at 2:06 am

    speed up the rendering of an image is to simply call as a background of a div tag.”, and elsewhere I read that that if you use CSS for images the images will come up last (after your text), which is what I want.

    But I don’t want to load up my css page with a long list of images (40), becuase the CSS page is loaded into the visitor’s browser, and so will slow the length of time it takes to bring up my site. I really don’t want to use sprites. Isn’t there a way where I can load the images into a PHP includes file and refer to the includes file in the CSS, but what code would I use in the main coding (HTML) from page to page to bring up the different images for different pages?

    Thanks for the help

  • kewlflame14 August 29, 2013 at 1:55 pm

    I’d like to know how they use the same image to use it as background for several elements.

    for example:

    all YouTube element’s background are on this single image:

    all element’s background are on this single image:

    all Deviantart element’s background are on this single image:

    I wonder if somebody could tell me how they do it and where i can find some guides/tutorials to do that.

  • DuckieM10 September 1, 2013 at 3:05 am

    At the moment whenever I go to my web pages the web site rollovers ie home about us contact us etc appear one after another – how can i get them to appear quicly and at the same time. Cheers
    Cheers guys – I want to upgrade my internet design software do you know of a good product which is easy to use but able to produce good effects

  • RxP DarkBox September 7, 2013 at 8:51 pm


    I am pulling my web page graphics from a grid of image sprites. It all works except that I want to generate the original graphic at twice the size and then scale down to 50% on the web page, so for instance if the image is 10 pixels high on the web page, the jpg is 20 pixels high, and the html tells the web page to make it 10 pixels high. In this way the graphic is more detailed when you increase the size of the web page in the browser.

    This is the code I am using, but so far I have been unable to rescale the image successfully, instead it shows up at the double size.

    img.org0 { width: 104px; height: 38px; background:url(‘/img_fqsprites1.jpg’) -2px -2px; }

    $source = ‘”/img_trans.gif” width=”1″ height=”1″‘ ;
    print ‘‘ ;

    The “width=50%” is not working, nor was “width=52px”.

    Any help appreciated.
    Amazing watercolors! You have great control and attention to detail.

    I will try to pull together a test using your div technique.

    YES! It worked! Now I just need to tweak it…


  • _marky_mark_ September 9, 2013 at 10:11 am

    Say you have 20 images you want to hold in a sprite. Most of the sprites I’ve seen would have the images as close to a square-shape as possible — maybe a 5 x 4 — but is there any reason to have this shape rather than, say, a 20 x 1? Is one a better habit over the other?

  • Milk84 September 15, 2013 at 5:49 am

    I want to display a small icon picture to the left of the links when the mouse is over them using CSS .. how can i do that ?

  • janki soni September 28, 2013 at 4:10 am


    So in this example Google uses this image and then crops to a single icon on the image displaying it as that cropped selection. What is this generally called? How can I make this myself?

  • Ramblin Spirit September 29, 2013 at 11:27 am

    I’ve noticed that google uses one or two .PNG pictures which contain all of the icons they use for example this:
    I want to know how to slice or show only a certain part of a picture.
    Is there a HTML or JavaScript or maybe CSS way to do it?

  • steve October 15, 2013 at 12:42 pm

    I am trying to do an image replacement but I’m not sure how to go about it. I know how to do css sprites and that would work if i knew how to apply to this situation.

    What i want to do is roll over a small thumbnail on the left and then on the right side of the page i want a larger version of this image to appear. And then i want it to be so i can roll over another thumb nail and it does the same thing with the next image. i know this is possible i have seen it done i just don’t know how. I’ve seen use of it with iframes before but i want something more efficient than an iframe.

    Is there some kind of jquery i can use to get this affect or javascript in general to do this. Or even maybe the css sprite.

    any ideas?

    could you show an example of the javascript i’m still learning it so please be specific

  • zaclo October 20, 2013 at 3:34 pm

    A few years back the advance notice was changed from 3 months notice to 4 months notice. Our new management agent is now telling us that it is now 60 days notice. What is the correct time frame for those advance notices?

  • vanvark83 October 23, 2013 at 6:47 am

    How to get a book published or an advance up front to help you complete your book?
    I have a book that I finished the first copy of, not I want to try and get it published, and get some advance or a grant up from to complete it. Plus how do you get an agent.

  • friendly 4 November 5, 2013 at 11:55 am

    I am designing a website and want to make sure to optimize load time. I am setting up a sort of tab drop down menu, where each tab is a background image (the same image, just multiple times). Right now, each tab is a separate div that contains list items with the rest of the menu. If I set the div class of the tab to have a background image, then use that class multiple times, will the browser make a new HTTP request every time, or will it just grab the image once? Or should I use some sort of CSS Sprite so that it’s all one image?

    I know this may not be the best place to ask, but I thought I’d try it. Hopefully I explained it well, and just ask if you need more details. I would have tried to include code, but I don’t think it would really help in this case. Thanks

  • forahobby November 6, 2013 at 1:54 am

    I need to use a drop down menu, where you hover on a link and it drops down more links, but I cant use scripts/java or anything. I have seen it done before somewhere, so if anyone knows a site that explains, or you can explain, then thanks!

  • Le Pwner November 14, 2013 at 2:58 pm

    i know how to do it using Dreamweaver:
    1st insert table with the right width and right columns
    then click on insert rollover image but that gives me lot of junk code which i can’t have.
    is there a neater way to do this..
    plz help,

  • Larry R November 17, 2013 at 11:47 am

    I founded my own company awhile back, and we ended up growing very quickly. So quickly in fact that I am still the IT department. I originally built our webpage using Drupal on top of a LAMP open source stack that is hosted by a large data center (They’re scaling our hardware up and down to meet traffic demand).

    Our webpages are rich in embedded multimedia (Vimeo, Youtube). The problem is that the embedded content is responsive and loads quickly, but our surrounding pages are very slow and sluggish. Does anyone have any suggestions as to how I can fix this until we hire an IT department?

  • clntvrrt November 19, 2013 at 6:39 pm

    You know that thing you can do with CSS i think they call them CSS sprites when you have a big image with all sorts of parts and you display only certain portions of it. I want to use that thing in flash with actionscript is it possible? I’m not talking about using CSS in flash just that method i want a big image with some elements and then to display only parts of it and build many movieclips using only one image.
    I have a guy that runs and have about 10 frames i want to put them all in one image and the movieclip would display a part of the image at a time simulating the animation this way i have only one image and only one movie clip (for less to load and less RAM memory usage if you have a better technique please tell me because the 10 frames are just a part of it they could get to 100 or more in the final state)
    I need the stage to display other things too i can’t make it the size of the frame the stage would be 700×400 and the frame is about 150×250 or something like that so…

  • Denali November 22, 2013 at 11:44 pm

    What tourist attractions in Paris would making reservations in advance be recommended? My parents and I will be there from April 3 to April 10. Thanks for your help.

  • Mathew November 23, 2013 at 1:02 am

    We applied for advance parole monday and today is sunday, how long does it normally take to receive a notice of allowing us to leave ?