HTML and CSS Reference
In-Depth Information
width and height and set its
overflow-y
property to
auto
. It also has a background image that's displayed once
and has its
background-attachment
property set to
local
like this:
#tail {
white-space: pre;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border: double 4px #900;
height: 350px;
width: 250px;
margin: 0 auto;
overflow-y: auto;
background-image: url(images/border.png);
background-repeat: no-repeat;
background-attachment: local;
}
Figure
8-10
shows what happens when you scroll the content of the
<div>
in local.html. The background
image scrolls with the content.
Figure 8-10.
Setting background-attachment to local scrolls the background with the content
At first, this seems counterintuitive. Surely it should scroll when you set
background-attachment
to
scroll
?
To show what happens, the value of
background-attachment
in scroll.html has been changed to
scroll
.
Otherwise, the styles are identical to local.html. Figure
8-11
shows the result.
