CSS Sprites technique used on haidabo.com
November 17th, 2009After being inspired the other day, I decided it was time to design a new personal site. I’ve owned the domain haidabo.com for a while, but wasn’t really sure what to do with it until now. So, it has become a place to showcase my various projects as well as aggregate RSS feeds from all of my sites with dynamically updated content.
While I was designing haidabo.com, I used a technique that I’d like to share called CSS Sprites. This wasn’t my first time using sprites, but it was the first time I planned on using them to this extent. My goal was to create the entire website using only one image. How is that possible? A sprite is a large image that contains many smaller images inside it. So, I created all of the images for the site and placed them all inside one large PNG24 image with a transparent background.
When calling for an image (any image) in the CSS file, specify the sprite as the background image and give it a width and height. Then use unique IDs or classes to shift the background position specifically for each image. One problem I ran into during this process was repeating backgrounds. Sprites don’t work well for repeating images. They do have some limited ability to repeat one-dimensionally, but it’s tricky. To keep it simple, I decided to use separate images for my repeating backgrounds.
So, why would anyone want to use this technique? Sure, it’s a bit more work to combine all your images and set all those background positions, but in the end it will make your website more efficient. Each image that is loaded on your site requires a separate HTTP-Request (to your server). By combining images into a sprite, you reduce the amount of work your server is required to do. This may not make much of a difference for a small site without much traffic, but as the size of the site and the amount of traffic increase, this becomes more of a benefit.
Tags: CSS, CSS Sprites, RSS, Web Design
This entry was posted in the Web Design category.
Loading...