FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home  »  CSS  »  CSS Background Image Sprites

by 9 comments

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

CSS CSS Background Image Sprite ExampleThe 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 SpritesA 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 DeathThe 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.OptionsThe 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 GeneratorFor 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.

Tags

October 8th, 2007

Comments Welcome

  • Matthew James Taylor

    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.

  • Masque de catch

    CSS sprite is very useful. It allows to reduce the number of HTTP Request on my website ! Thanks for explanations !

  • Jorgen

    Image sprites are a good way of optimizing your page. You can find a tutorial on my site as well.

  • nomad

    I tried to install spritegen on my server but it doesn't work, anyone know what the config details should be ?

  • dalmatian

    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?

  • KB

    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.

  • Goodbye Quotes

    Hello,
    How to use full page background image and CSS sprite together? In all the examples I have seen, one needs to specify div width manually.

    thanks
    JP

  • Mike

    Hi,

    I was wondering if you've come across a way to use a sprite as a background image but set it without using px. I have a scalable section on my fitness website that I would like to use a background sprite for but can't seem to get it to stick to the bottom of the div. My old method used % for positioning which worked perfectly (using a stand alone image). I would prefer to not to do this again but will if I have to. Just wondering if you've done anything previously that addresses my issue. Thanks.

  • IT Training

    CSS sprites cannot used if you have repeated background image.

My Online Tools


Popular Articles



Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two. See my article, On Hacking.
-- Richard M. Stallman



Related Articles

Twitter









[hide]

It's very simple - you read the protocol and write the code. -Bill Joy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

+Askapache | askapache

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service

↑ TOPMain