Facebook Twitter


Content. Databases. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them. This post was originally co-authored in late 2007 by me and Volkan Görgülü, I'm updating it now to improve it a bit and make it more current.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

You've heard of them, but... Do you really understand them? The name might be a little misleading, because sprites aren't little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the "on" and "off" states of a button are contained within the same image and are activated by shifting the background-position? Here is an example of that on CSS-Tricks. The-z-index-css-property-a-comprehensive-look. Advertisement Most CSS properties are quite simple to deal with.


Often, applying a CSS property to an element in your markup will have instant results — as soon as you refresh the page, the value set for the property takes effect, and you see the result immediately. The Myth of DPI. The size of an image in a website layout is important.

The Myth of DPI

From proper alignment to getting just the right amount of white space, sizing photos and graphics properly beforehand is essential to creating a balanced look. Images on the web are measured in pixels. Yet many people go through the trouble of setting their images to 72 dots per inch (DPI).