使用CSS样式表在同一行上浮动2个图像（背景图像属性）

我有两张图像，它们的高度和宽度完全相同。我希望他们坐在同一排。但是，它们的组合比车身宽度大得多。我使用IMG标记通过HTML标记插入了它们

<div class="wrapper">
  <ul id="gallery">
    <li>
      <img src="http://www.picturesnew.com/media/images/image-background.jpg" alt="">
      <p>Test image 1 off google.</p>
    </li>
    <li>
      <img src="http://www.picturesnew.com/media/images/image-background.jpg" alt="">
      <p>Test image 2 off google.</p>
    </li>
 </ul>  
</div>

---

我可以用

背景图像：url（“”）

来代替IMG标签来完成同样的事情吗？

以下是我所做的工作

#gallery li{
  float:left;
  width:50%;
//I added this and removed the original img tags in the html code. 
  background-image:url(http://www.picturesnew.com/media/images/image-background.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height:500px;
}

---

使用div而不是img，请参见此处

#gallery li{
  float:left;
  width:50%;
//I added this and removed the original img tags in the html code. 
  background-image:url(http://www.picturesnew.com/media/images/image-background.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  height:500px;
}