html - 为什么我的背景图片没有覆盖整个页面？

Question

我希望我的背景图片覆盖整个 div，但有很多空白区域

HTML

<div class="backgroundsecction">
  <div class="backgroundimg"></div>
</div>

CSS

.backgroundimg{
 background-image: url(https://i.imgur.com/MAdBtV4.png);
height: 100%;
width: 100%;
background-repeat: no-repeat;

position: relative;
}


.backgroundsecction{
height: 900px;
width: 100%;

}

Answer 1

请使用background-size:cover

.backgroundimg{
  background-image: url(https://i.imgur.com/MAdBtV4.png);
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  position: relative;
  background-size:cover;
}
.backgroundsecction{
  height: 900px;
  width: 100%;
}

<div class="backgroundsecction">
  <div class="backgroundimg"></div>
</div>