HTML and CSS Reference
In-Depth Information
The background image you list first
will be the closest to the viewer. If
you put all the images in the same
place, you can see that the first
image covers the rest:
background: center
url('pitr-head.png') no-repeat,
center
url('aj-head.png') no-repeat,
center
url('mike-head.png') no-repeat,
center
url('sid-head.png') no-repeat;
See the full example in ch10/back-
grounds-6.html.
You can use this behavior to your
advantage to create interesting
effects. This examples use a
semitransparent
PNG
image in
between each of the other
background images to create
a progressive fade:
background: top right
url('pitr-head.png') no-repeat,
url('trans-66.png'),
bottom right
url('aj-head.png') no-repeat,
url('trans-66.png'),
top left
url('mike-head.png') no-repeat,
url('trans-66.png'),
bottom left
url('sid-head.png') no-repeat;
See the full example in
ch10/backgrounds-7.html.
