FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home » CSS » Come On and Sprite for your Website

by comment

CSS Image Sprite ExampleNotice any familiar images from my website? Real special huh? Hah, maybe.. No, let's not be silly, let's get to it. Get ready to save some bandwidth

CSS Sprites- What you say?

Css sprites sound tough but they aren't, not here, not in this article. I want you to make one, I want a faster technorati, I want a faster hypem.com! Just one. Now your website visitors only have to download 1 image instead of 3-15! I do that for you guys and girls, won't you return the favor?

Image Sprite before XHTML

  • Go to you site and pick out 3-15 images that are on almost every page.
  • Now create a new image with all of those images side by side, it will make things easier to have each image be at the very top, so they aren't on top or above each other.
  • Then make the background white and save the file.

That's it! Your own Image Sprite!

Just a couple images pasted together in a photoshop file. Now that we understand the simplicity of a sprite, lets focus on using one, and making that as easy as possible, none of that tricky CSS stuff that I love.

XHTML before CSS

Ok before you have CSS, you have XHTML. This is the XHTML that IS my askapache logo at the top left of this screen. It is conveniently a link to my home page. All you need to notice from this example is the id="apache". That is how we can control that particular tag from within CSS.

<a id="apache" href="http://www.askapache.com/" title="AskApache.com Logo"></a>

CSS and We're spent

CSS Sprite, candid shotWhew, that was an exhausting couple minutes right? Ok did you take a water break? You ready go? Lets do it. Time to pay a little back to our Internet.

This css explains that the background-image to be displayed for the #apache link element is exactly 160x27 pixels and is 81pixes in from the left of the image css-sprite.

#apache {width:160px; height:27px; background:url(http://s.askapache.net/i/css-sprite.png) -81px 0 no-repeat;
margin:0; padding:0; overflow:hidden;display:block; position:absolute; top:10px; left:10px; }

Dancing the Sprite Dance

Ok so that should get you started, or if that makes you happy enough you are good to go!

Using CSS Sprites for image elements

See now why I said it would be easier if you keep your images all aligned at the top? This way you only have to figure out the distance from the left as well as the actual image dimensions. But as my sprite example shows, you don't have to do it the easy way, but just coming this far you've accomplished more than you realize, and probably gave you an advantage most of your competitors don't have. No doubt. Congratulations.

But, what if you are a stickler for semantically ideal coding guru and you don't like using background-images on an a element without using an image element? First, chill :p

I experimented a little bit on this awhile ago, and discovered a simple but IMO very elegant solution. To get it to work, use a 1x1 transparent .gif image and set that as the source of your image, everything else discussed above will then work.

Caveats

Not many. Because you should only use this for your most requested images that are more design elements than something like a photo of your dog.

  • Use the overflow:hidden css to prevent overlapping.
  • For list elements like li, ul, dt, etc.. follow this article and align the elements vertically.
  • Dont become a SNOB!

Tags

Comments Welcome

Information is freedom. Freedom is non-negotiable. So please feel free to modify, copy, republish, sell, or use anything on this site in any way at any time ;)

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.
-- Richard M. Stallman


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 | htaccess.io | htaccess.guru

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

↑ TOPMain