HTML and CSS Reference
In-Depth Information
Figure 8.3
Repeating
pattern with a
break, separated
into two parts.
Splitting the image into two pieces, one that tiles and one that sits above
and covers up the tiling portion, can solve the problem:
body {
margin: 0;
padding: 0;
background: #fff url(images/tiled_horizontal_bars.png)
➥
repeat-x center top;
}
header {
height: 100px;
width: 400px;
margin: 0 auto; /* center the block */
padding: 0;
background: #fff url(images/the_dip.png) no-repeat center top;
}
When working with the background of the document, you have an added
challenge that you don't want to extend the content areas unnecessar-
ily and create scrollbars on the viewport. Don't forget that in addition to
the
<body>
element,
<html>
can also be styled and used as another layer
before you have a need for wrapper elements or other artificial hooks.
