Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 26th of August 2016 10:22:30 AM

Copyright © 2000 O'Reilly & Associates, Inc. All rights reserved.

Printed in the United States of America.

H2 {background-image: url(;}


BODY {background-position: top center;}
directions along the specified axis. The repeating of a background image begins with the origin image, whose position is defined by the value of background-position.


BODY {background-repeat: no-repeat;}

Published by O'Reilly & Associates, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of O'Reilly & Associates, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O'Reilly & Associates, Inc. was aware of a trademark claim, the designations have been printed in caps or initial caps. The association between the image of a koala and the topic of HTML and XHTML is a trademark of O'Reilly & Associates, Inc.

While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein.

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

first line in the following example can be rewritten with thesubsequent CSS, and either will have the result depicted in Figure 6-3:

<BODY TEXT="black" LINK="#808080" ALINK="silver" VLINK="#333333">BODY {color: black;}     /* replacement CSS */A:link {color: #808080;}A:active {color: silver;}A:visited {color: #333333;}
Figure 6-3

Figure 6-3. Replacing BODY attributes with CSS

While this may seem like a lot of extra typing, consider that using tiling pattern, the image will probably need to be pretty small. After all, individual letters aren't that large!

A.grid {background-image: url(smallgrid.gif);}
<P>This paragraph contains <A HREF="..." CLASS="grid">an anchor with a
background image</A> which is tiled only within the anchor.</P>
Figure 6-24

Figure 6-24. A background image on an inline element

There are a number of ways to employ this technique. You might place an image in the background of STRONG elements, in order to make them stand out more. You could fill in the backgroundbackground does not extend into the margins, and the border is justinside the margin. The CSS specification strongly implies that thebackground extends to the outside edge of the border, since it talksabout the borders being drawn "on top of the background of theelement," but not all browsers seem to agree. This is importantbecause some borders are "intermittent" -- forexample, dotted and dashed styles -- and the element'sbackground should appear in the spaces between the visible portionsof the border.

then absolutely position one of its children, as shown in
Figure 9-23.

Figure 9-23

Figure 9-23. Nested absolutely positioned elements

The small box B in the lower-left corner of the element A is a child of A, which is in turn a child of a relatively positioned DIV. B was absolutely positioned, as was element A, using styles like these:

DIV {position: relative;}
P.A {position: absolute; top: 0; right: 0; width: 15em; height: auto;commonly used to "scale" images, either up or down. Thus,
if an image is 150 pixels wide and its width is
set to 75px , then the image will be displayed
half as wide as it would ordinarily appear. In most browsers, the
height will be scaled to match, unless it has been explicitly set to
a certain value. Figure 8-27 shows a few

Figure 8-27

Figure 8-27. Scaling images with the width property

It's also possible to scale an image (or other replaced