#      
## Overview
 The background-image property can add multiple background images to an element. It allows us to append multiple image URLs with a comma (`,`) and stacks the images on top of each other.

## Code 

<html>
<body>

  <h1>Multiple Backgrounds</h1>
  <p>In this div we have two background images.</p>

  <div id="test">
    <h1>Multiple Images</h1>
    <p>With the help of background-image property we can add multiple background images to the element. We can separate the different background images with the help of a comma and the images are placed on the top of each other where the first image is close to the viewer. </p>
  </div>

</body>
</html>

#test 
{
  background-image: url(https://www.pngkit.com/png/full/742-7427019_thumbnail-frame-png.png), url(https://www.pngkit.com/png/full/742-7427019_thumbnail-frame-png.png);
  background-position: right bottom, left top;
  padding: 15px;
}

codemirror

## Explanation

HTML
- Lines 4-5: These lines just set up the basic layout and add some text for our Html page.

- Lines 7-10: These lines create a div (CSS element), `test`.


CSS

- Lines 1-6: These lines set the layout for the `test` div. The styling sets the two images as the background and defines their positions.


How to add multiple backgrounds to an element in CSS

The background-image property in CSS allows stacking multiple images on an element using a comma-separated list of URLs.