CSS背景图片属性

Question

这是我的HTML：

<div id="banner" style="background-image: url("img/banner.jpg")">
  <img src="img/logo.png" alt="logo" />
</div>

这是我的CSS：

#banner {
  width: auto;
  height: 100vw;
  background: url("/img/banner.jpg");

我希望banner.jpg成为具有完整视口填充的那个div的背景...怎么办？

Answer 1

添加以下CSS代码：

    #banner{
    width: %100;
    }

Answer 2

这就是我将如何实现效果https://jsfiddle.net/d5Lptwut/10/

<div id="banner">
  <img src="img/logo.png" alt="logo" />
</div>

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

#banner {
  background: url('/img/banner.jpg') no-repeat center center;
  height: 100%;
  width: 100%;
  background-size: cover;
}