CSS Background Image Sprites

Using a CSS Background Image Sprite with the CSS background-position and background-image I can display all these icons: . I can even have them show up anywhere on the page!

Using CSS Image Sprites

The above image is one that I actually use on this site. You will see a lot of the images in this sprite by looking around on my page..

Wow! here are more images... but remember they are all from the same image. So instead of your visitors browsers requesting 22 images to display these 22 icons, your browser made a single request, saving you bandwidth and speeding up your site for visitors. , , , , , ,

What Are CSS Sprites

CSS sprites can majorly reduce the number of HTTP requests for images referenced by your sites html, javascript, and css files. Images are combined into a single larger image at specific X and Y points. Now you give an html element the background-image of the sprite, and specify the background-position of the image all in the CSS. You can learn how to create CSS Image Sprites in Adobe Photoshop.

A method of using a master image made up of smaller images that are used for presentation within a site, and displaying these images as needed by positioning them via the background-position property

CSS background-position

The css background-position declaration informs the clients browser where to position a background image. The property accepts three kinds of values: keywords, pixels and percentages, values that may be mixed. When you use only pixels and percentages, the first value denotes the left position, the second one the top position. Get the backgrond-position specs and practice some example positioning.

More CSS Sprites Resources

CSS Sprite Articles

Sliding Doors Meets CSS Sprites A while back Douglas Bowman wowed Alistapart readers with his excellent article Sliding Doors of CSS, describing a new and revolutionary way to build a tabbed menu interface using CSS.

CSS Sprites: Image Slicing's Kiss of Death The natural tendency is to assume that a full double-sized image must be heavier than a similar set of sliced images, since the overall image area will usually be larger. All image formats have a certain amount of overhead though (which is why a 1px by 1px white GIF saves to around 50 bytes), and the more slices you have, the more quickly that overhead adds up. Plus, one master image requires only a single color table when using a GIF, but each slice would need its own. Preliminary tests suggest that all this indicates smaller total file sizes for CSS Sprites, or at the very least not appreciably larger sizes

CSS Sprite Image Tools

This tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image. Options The tool has a number of options you can configure to modify characteristics of the generated sprite image and CSS to better match the specifics of your site set up. These options are detailed below:

CSS Sprite Generator For the uninitiated, a CSS Sprite is a single image file which contains several graphics. Using CSS background positions it's possible to display any one of the graphics. By using a sprite you save on multiple http requests which helps speed up the rendering of your page. The tool allows you to upload a zip of images which the script then concatenates into one image to be used as a CSS Sprite. The CSS offsets for each image are created and output and class-names for each image in the sprite can be generated from the filenames of each of the original images. In fact this approach is recommended.

• Feed for this Entry
• Trackback
• php.ini htaccess

Reader Comments

1. KB ~September 1, 2011 @ 10:55 am

   It was good and I got to know few good things. I have also created a CSS sprite for my site 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.
2. dalmatian ~January 21, 2011 @ 10:11 am

   Hi I cant get my sprite to work, I dont know what to do? Can you help me please? This is a part of my css. The icons wont show and the url is correct and so is the name of the png that contains a total of 11 png icons.

   li { list-style-type:none; width:16px; height:16px; }
   li a { background-image:url('pictures/style/sprite-icons.png');  width:16px; height:16px; }
   li a .sprite-skype{ background-position:-330px 0px; width:16px; height:16px; }
   li a .sprite-tag{ background-position:-396px 0px; width:16px; height:16px; }
   li a .sprite-twit{ background-position:-462px 0px; width:16px; height:16px; }

   This is my list of href's.

   <a href="#"></a>
   <a href="#"></a>
   <a href="#"></a>

   I dont know what the problem is? I cant get the icons to show for the right href?
3. nomad ~May 31, 2010 @ 3:49 pm

   I tried to install spritegen on my server but it doesn't work, anyone know what the config details should be ?
4. Jorgen ~April 19, 2010 @ 11:22 am

   Image sprites are a good way of optimizing your page. You can find a tutorial on my site as well.
5. Masque de catch ~March 2, 2010 @ 2:01 pm

   CSS sprite is very useful. It allows to reduce the number of HTTP Request on my website ! Thanks for explanations !
6. Matthew James Taylor ~October 9, 2007 @ 2:32 am

   Sprites are great except Earlier versions of Internet Explorer don't render the background-position property correctly. The only way to solve this problem is to have a separate stylesheet for older IE versions and specify individual images. I hate Microsoft.

Add Comment!