HTML and CSS Reference
In-Depth Information
The style rule for the
<body>
in repeat-y.html looks like this:
body {
background-image: url(images/border.png);
background-repeat: repeat-y;
background-color: #CCC;
color: #000;
font-family: Tahoma, Geneva, sans-serif;
margin-left: 60px;
}
An interesting feature about repeat-y.html is that the background color and background image are displayed
in the
60px
left margin of the
<body>
. The normal rule is that backgrounds do not extend into an element's
margins. However, the background of the
<body>
covers the whole viewport.
■
Although browsers allow you to set different background properties for the
<body>
and
<html>
elements,
the recommendation in the Css3 specification is to add a background only to the
<body>
element.
Note
If you set
background-repeat
to
no-repeat
, it's displayed once as in no-repeat.html (see Figure
8-6
).
Figure 8-6.
You can also set a background image to display just once
The styles for the
<body>
in no-repeat.html look like this:
body {
background-image: url(images/flower.png);
background-repeat: no-repeat;
background-color: #EFECCA;
color: #000;
font-family: Tahoma, Geneva, sans-serif;
margin-left: 60px;
}
