How to insert two background images at the same time in css

When using multiple background images, first separate the values ​​of the background-image attribute with commas and list the images to be used; then use background-repeat to define the repeated attributes; finally use background-position to define each The location of the small picture is enough.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

When using multiple background images, just separate the values ​​​​of the background-image attribute with commas, list the images you want to use, then use background-repeat to define the repeated attributes, and finally use background-position to define The position of each small picture.

HTML code:

<div></div>

CSS code:

background-image: url(images/scroll_top.jpg),
                  url(images/scroll_bottom.jpg),
                  url(images/scroll_middle.jpg);
 
background-repeat: no-repeat, no-repeat, repeat-y;
 
background-position: center top, center bottom, center top;

scroll_top.jpg

##scroll_middle.jpg

scroll_bottom.jpg

When defining multiple values ​​with background-repeat and background-position, the order of definition Correspond to the order of background-image respectively.

Abbreviation:

The way defined above can be confusing, especially when it needs to be rearranged or maintained later. Therefore, many web designers like to use abbreviations to specify multiple background images.

CSS code:

background: url(images/scroll_top.jpg) center top no-repeat,
            url(images/scroll_bottom.jpg) center bottom no-repeat,
            url(images/scroll_middle.jpg) center top repeat-y;

Every time a picture is defined with a url, the position and repetition method of the picture are defined.

Key points:

Multiple background images will be stacked one on top of the other, just like the layers in Photoshop. The order in which background images are listed determines which image is on top. The first image listed is on the top level, the second image is on the second level, and the last image is on the bottom level. Taking the previous code as an example, the upper part of the scroll (scrollTop.jpg) is above the bottom of the scroll (scrollBottom.jpg), and the bottom is above the middle of the scroll (scrollMiddle.jpg).

The above is the detailed content of How to insert two background images at the same time in css. For more information, please follow other related articles on the PHP Chinese website!