Saturday 25th of February 2017 02:29:11 PM

by Eric A. Meyer
ISBN 1-56592-622-6
First edition, published May 2000.
(See the catalog page for this book.)

Search the text of Cascading Style Sheets: The Definitive Guide.

background-color, you can create some niceeffects. This example is shown in Figure 6-18:

P {color: black;}H1 {color: white; background-color: rgb(20%,20%,20%);}
Figure 6-18

Figure 6-18. A nifty effect for H1 elements

This shows but one example of how displays can be dramaticallychanged with just a few styles. Of course, there are as manycombinations as there are colors, but we can't exactly showthem here -- being stuck in grayscale as we are -- however,

Table of Contents

Copyright Page
Chapter 1: HTML and CSS
Chapter 2: Selectors and Structure
Chapter 3: Units and Values
Chapter 4: Text Properties
Chapter 5: Fonts
Chapter 6: Colors and Backgrounds
Chapter 7: Boxes and Borders
Chapter 8: Visual Formatting
Chapter 9: Positioning
Chapter 10: CSS2: A Look Ahead
Chapter 11: CSS in Action
Appendix A: CSS Resources
Appendix B: HTML 2.0 Style Sheet
Appendix C: CSS1 Properties
Appendix D: CSS Support Chart
Library Navigation Links

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

6.2.4. Repeats with Direction (Revisited)

In theprevious section on repetition, we explored the valuesrepeat-x , repeat-y, andrepeat, and how they affect the tiling ofbackground images. In each case, however, the tiling pattern always image to be repeated in the horizontal or vertical directions, respectively, and no-repeat prevents the image from tiling in any direction.

By default, the background image will start from the top left corner of an element. (We'll see how to change this later in the chapter.) Therefore, the following rules will have the effect seen in Figure 6-28:

BODY {background-image: url(yinyang.gif);


Applies to

While this is interesting enough, consider the case of elements without a declared width, whose overall width (including margins) is therefore dependent on the width of the parent element.

Figure 7-11

Figure 7-11. Percentage margins and changing environments

As you can imagine, this leads to the possibility of "fluid" pages, where the margins and padding of elements enlarge or reduce to match the actual size of the display canvas. In theory, as the user changes the width of a browser window, the

BODY {background-image: url(bg23.gif);background-repeat: no-repeat;background-position: 100% 10px;}
Figure 6-44

Figure 6-44. Mixing percentages and length values

You cannot, however, mix keywords with othervalues. Thus, top 75% is notvalid. If you use a keyword, you're stuck using only keywords,but percentages and lengths can be mixed together.