Theory
Theory
Comments

Multiple Background Images

You can assign several background images to a block at the same time. To do this, the paths to the images in the background-image or background properties are separated by commas:

background-image: url("image-1.png"), url("image-2.png");

In this case, the images that are listed first will be displayed higher: so image-1.png in the example will be higher than image-2.png.

The values of other properties for multiple background images are also comma-separated. The order of the values must match the order of the background images. For example:

/* For the first image the scaling is "contain," and for the second it is 100px */
background-size: contain, 100px;

/* For the first image the positioning is top, and for the second it is 100% */
background-position: top, 100%;

Let’s give Muffin some trendy glasses in the portrait using a second background image.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Multiple Background Images</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="portrait"></div> </body> </html>

CSS

.portrait { box-sizing: border-box; margin: 20px auto; padding: 40px; width: 400px; height: 400px; border: 40px solid rgba(255, 255, 0, 0.4); background-color: #ffffff; background-image: url("img/muffin.jpg"); background-position: center; background-clip: padding-box; background-origin: border-box; background-size: cover; background-repeat: no-repeat; }

Goalscompleted

Add a background image to the portrait in the upper layer: img/glasses.svg,
assign it the dimensions 150px
and the position 75px 125px.

Multiple Background Images

Comments

Log in

Sign up

Restore access