mina86.com

CSS sprites as background

Get back to “Jump to”

CSS sprites aren't anything new. They have been around for years now, and are one of the methods to optimise website load time. The idea is to incorporate several images into a single bigger one and in this way decrease number of round trips between HTTP server and a browser.

In its traditional use, CSS sprites work as a replacement for images and cannot be used as a background. But background is exactly how I'd implemented quote image left of long quotes and flags indicating paragraph language, eg:

A few of the entries on my blog have text both in English and Polish. On those, I use some simple icons to indicate which is which:

Polish flag on the left indicates paragraphs written in Polish.

UK flag on the left indicates paragraphs written in English.

After a bit of playing around I finally figured out how to get this working, and even though there are some caveats, sprites can be used as a top-left no-repeat background image as well.

End of the page, get back to “Jump to”.