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 {
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;
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
Search WWH ::

Custom Search