Multiple Background Images
Transcript: The last background image will be the bottom layer. Beware of trying to cram in too many overlapping images. All of the normal background image properties apply, they are just separated by commas. Background Properties background-image: url(image1.png), url(image2.jpg); background-size: 25%, cover; background-repeat: no-repeat, no-repeat; background-position: 50% 75%, center; Layered Images Here image1 will be on the top layer, while image3 will be the bottom layer. Remember, transparencies are only supported with certain image formats. You can overlay as many background images as you want, but remember that backgrounds affect visibility of site content. Background images can add variety and help make your page stand out. For example, in this presentation, the flying origami birds are the background image. Sometimes one background image isn't enough. Fortunately, CSS allows us to layer multiple background images. The first background image listed will be the first layer, followed by the second, etc. Below is a basic example of layered background images. Adding Multiple Backgrounds div { background: url(image1.png), url(image2.png), url(image3.png); } Multiple Background Images Adding multiple backgrounds is easy. Just add the next image in the same way you would a background image, separated by a comma. Multiple Background Images Be careful not to put opaque images on top or you won't see the the other layers. div { background: url(image1.png), url(image2.png), url(image3.png); } Sample Page For example: