HTML and CSS Reference
In-Depth Information
Image Backgrounds
In the preceding examples, the CSS rules used a color for the box's background. Instead of specifying a
background color, you can use a background image. New in CSS3 is the ability to use multiple images in a
single background. For example, you can use four different images and place them in the top-left, top-
right, bottom-left, and bottom-left areas of the box. Of course, the actual area occupied by the image is
governed by the image's size. Consider the following CSS rule:
.imageBackground {
padding:15px;
font-size:20px;
border: 2px solid #071394;
border-radius: 25px 25px 25px 25px;
background-image: url('images/RedFlower.png'), url('images/BlueFlower.png');
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
height:300px;
}
This CSS rule uses the
background-image
property to specify two image URLs:
RedFlower.png
and
BlueFlower.png
. The placement of these two images is controlled by the
background-position
property. For
every image URL in the
background-image
property, there must be an entry in the
background-position
property. In this example,
RedFlower.png
is placed in the top-left corner of the box and
BlueFlower.png
is
placed in the bottom-right corner.
You also need to specify the
background-repeat
property. In this example, because you don't repeat the
images horizontally or vertically, you set
background-repeat
to
no-repeat
. Figure 13-14 shows the resulting
box background.
Figure 13-14.
Using multiple images for the box background
