(font-sizefor example), and you can also individually specify the back-
ground properties if you wish, like this:
body {background-image: url(pebble.jpg);}
This causes the pebble image to tile throughout the background, covering it.
That’s because the tiling value (repeat) is the default. If you don’t want
tiling, use the no-repeat value.
No background inheritance ..............................................................
Background images are not inherited. You wouldn’t want a background to be
inherited by every element in the document. That would ruin the effect with
some kinds of backgrounds (those employing bigger repeating images than the
pebble texture used in this chapter). Larger images (a repeating coin image for
example) would perhaps look OK as a background for a coin dealer’s site — as
long as the coin were lightened up enough so that they didn’t cause readability
problems with the page’s text. However, if that image of a coin were inherited,
it would tile individually for other elements. Doubtless smaller elements like
headlines would cut a line of coins in half, others in three-quarters, and so on.
The page would be a mess of varying tile zones. In fact, no background value is
inherited.
Special repeats ...................................................................................
Unless you specify otherwise, a background image repeats both vertically
and horizontally until it fills the window. However, if you want, say, a textured
border down the left side, you can specify a vertical-only repeat, using the
repeat-yvalue, like this:
<html>
<head>
<style>
body {background-image: url(paper.jpg)
;background-repeat: repeat-y;}
h1 {font-size: 3em;padding-left: 28px}
</style>
</head>
<body>
<h1>Check in to the B & B!</h1>
148 Part II: Looking Good with CSS
