CSS - Multiple Backgrounds

Quiz

Multiple backgrounds means using multiple images as a background. By using CSS background-image property we can use multiple images as a background.

Mulitple Background Images

Each image of the background property will be separated by commas, the images will be stacked up on each other. If you are using two images the first value(image link) of background property will be stack on the top.

Syntax

div {
    background-image: url(link1), url(link2);
    background-position: left top, left top;
    background-repeat: no-repeat, repeat;
}

Above syntax is following the below mentioned rules.

The URL for each image should be provided as value for background-image separated by commas.
The background-position property is used to specify the starting position of each background image. This should also be separated by commas in the same order as in the URL.
The background-repeat property is used to specify repeating nature background images, when the image does'nt fit fully to the background area.

Example of Multiple Backgrounds

Following is HTML code shows example of using multiple background images for a div element.

Example 1

Here in this examle we will use two images as a background.

<!DOCTYPE html>
<html>
<head>
    <style>
        .multi-background {
            background-image: url(/css/images/logo.png), 
                              url(/css/images/border.png);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
        }
    </style>
</head>
<body>
    <div class ="multi-background">
        <p>
            This div uses two background images..
        </p>
    </div>
</body>
</html>

Example 2

Defining sizes of multiple background images. The background-size property specifies the size of the background images. If you are using multiple background images, size of each image can be separated by commas.

<!DOCTYPE html>
<html>
<head>
    <style>
        .multi-background {
            background-image: url(/css/images/logo.png), 
                              url(/css/images/border.png);
            background-position: left bottom, left top;
            background-repeat: no-repeat, repeat;
            padding: 75px;
            background-size: 200px, auto;
        }
    </style>
</head>
<body>
    <div class ="multi-background">
        <p>
            This div uses two background images. We controlled 
            size and position of Tutorialspoint Logo...
        </p>
    </div>
</body>
</html>

Print Page