// Articles / CSS Sprites

CSS Sprites is one of many advantages of using CSS. And is indeed very useful when optimizing your website. Consider the case where one would have border-images applied as background-images on division tags, like done on Brugbart by the use of BlueBoden's BorderTechnique

Common Border Techniques

I didn't like the other Techniques, which are more like hacks, so i made my own some time ago. No matter the Technique however, if using images as borders, Each image would mean an Additional HTTP Request. By using CSS Sprites however, we are efficiently able to lower the requests, and perhaps even halve the file-size in some caces. All this simply by including the images in one image.

The result?

I minimized the http requests required to load the page, and almost halved the size of the combined images, not to mention the improved quality i got from using png24 above png8 with 256 colors and index transparency.

How to make CSS Sprites

Simply carefully consider the size in pixel of each image, and do something similier to what i did in the image to the left. When you got your image ready, you will need to place the image using the CSS background-position Property.

Note. The border-set displayed in the two images BG_Spirits2.png and BG_SpiritsRTB2.png attached to this article may be used for free in your own layouts and projects. Keep in mind however, that you got it for free, and so you should give it for free.

If you have difficulties applying the borders in your own layout, i recommend you read BlueBoden's BorderTechnique With background-Images.