Why background image cannot display two pictures

In CSS, background-image Property is used to set the background image of the element. It is a single value attribute and can only accept one image as a parameter, so it cannot be directly passed through background-image To display two or more pictures at the same time.

If you want to display multiple images in one element, there are several ways:

Use CSS's multi background function:
1. • CSS3 introduces a multi background function, which can be accessed through background-image Property to set multiple background images separated by commas.
   • Sample code:
      

     .element {
background-image : url ( 'image1.jpg' ), url ( 'image2.jpg' );
/*Other Style Properties*/
}


• Use pseudo elements (:: before or:: after):
  • You can use pseudo elements to insert additional tags and set background images for them.
  • Sample code:
     

    .element ::before {
content : '' ;
display : block;
background-image : url ( 'image1.jpg' );
/*Other Style Properties*/
}

    .element ::after {
    content : ” ;
    display : block;
    background-image : url ( ‘image2.jpg’ );
    /*Other Style Properties*/
    }

• Use HTML element nesting:
  • Nest multiple elements together, and set a different background image for each element.
  • Sample code: < div class = "parent-element" >
< div class = "child-element" style = "background-image: url('image1.jpg');" >
<!-- Content -->
</ div >
< div class = "child-element" style = "background-image: url('image2.jpg');" >
<!-- Content -->
</ div >
</ div >


With the above method, you can display multiple images in one element. The choice of the appropriate way depends on the specific needs and design.