HTML and CSS Reference
In-Depth Information
The simple way to convert an image to a data URI is to use an online converter, such as the one at
. You then simply replace the path to the image as the value of url()
in the style rule like this (the code is in datauri.html):
ul {
fAYgOMBNEAESTDSFz7scaAAAAAElFTkSuQmCC); /* red square */
list-style-type: square;
In a modern browser, this produces the same result as in Figure 10-9 . IE 6 and IE 7 don't understand data
URI, so they display the default square instead. The obvious disadvantage of a data URI is that it's not human
readable, so it's a good idea to add a comment to remind yourself what the image looks like.
The CSS3 image()
notation described in “using negative offset with CSS Sprites” in Chapter 8
allows you
to specify image fragments. once browsers support image() , the need for data uRi is likely to go away.
Using Larger Images
You're not restricted to discs, circles, and squares. For example, list-style-image.html uses an image of a wine
glass as the symbol for an unordered list like this:
ul {
list-style-image: url(images/redwine.png);
shows, the base of the image is aligned with the baseline of the text in each item. Also, the
image is displayed at its full height, increasing the gap between list items.
As Figure 10-10
Figure 10-10. The custom image affects the line height of the list items
Search WWH ::

Custom Search