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

请使用.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%; }

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 2

如果白色边框困扰你的背景，请使用以下内容：

＆＃13;

.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%;
}

body {
  margin: 0;
}

＆＃13;

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

＆＃13;

如果图像小于屏幕，则使用较大的图像。通常的做法是准备一些人可以拥有非常大的分辨率显示... 或者扩大规模，例如@ankitapatel提到：background-size:cover;。

Answer 3

按建议使用2件事

＆＃13;

    body {
        margin : 0px;   //add this 
    }
    
    .backgroundimg {
        background-image: url(https://i.imgur.com/MAdBtV4.png);
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;    
        position: fixed;  //change fixed to cover entire
    }
    
    
    .backgroundsecction{
    height: 900px;
    width: 100%;
    
    }

＆＃13;

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

＆＃13;

为什么我的背景img不覆盖整个页面？

3 个答案: