use CSS sprites for list () background image

Question

Is it possible to use CSS sprites for the list background image? Normally, I render my sprites with CSS like this:

.sprite { background: url(sprite.png) no-r         


        

Answer 1

List elements background images via sprites have pittfalls, due to variable heights and widths. Think of users that enlarge their font size. Now your imagined li height becomes heigher than expected and your other sprite images become visible. Most useful for list and sprites are when the images are top left aligned. Stacking images diagonally from bottom left to top right gives most chance to prevent other sprite elements to become visible. Left vertical centered images required fixed width of the outer element (example 800px), and the width of the sprite images becomes that width, times the number of different images. 10 different tick marks times 800 px = 8000px wide sprite.

A graphical example:

|--------------- 800px -------------|
                                    |--------------- 800px ------------|

+-------+----------------------------------------------------------------------+
| Img 1 |                                                                      |
+-------+                                                                      |
|                                                                              |
|                                                                              |
|                                                                              |
|                                   +-------+                                  |
|                                   | Img 2 |                                  |
|                                   +-------+                                  |
|                                                                              |
|                                                                              |
|                                                                              |
|                                                                              |
|                                                                      +-------+
|                                                                      | Img 3 |
+----------------------------------------------------------------------+-------+