背景图片不覆盖全屏答案

【问题标题】：Background image not covering full screen背景图片不覆盖全屏
【发布时间】：2016-06-27 15:43:06
【问题描述】：

我正在构建一个单页向下滚动类型的网站，其中每张幻灯片都是一个页面。在最后一张幻灯片中，背景图像不知何故被剪掉了，只有一个空白区域。该幻灯片的 id 上使用的 css：

#seven {background:url(../img/camara_view.JPG) bottom no-repeat fixed; }

这是一个印刷品： http://postimg.org/image/489mxfagt/

有什么解决办法吗？

【问题讨论】：

这可能是因为#seven 没有伸展到页面底部。如果您提供 HTML 和相关 CSS，我们可以查看。

标签： html css image background whitespace

【解决方案1】：

你可以使用 background-scale 属性：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

【讨论】：

【解决方案2】：

如果您支持现代浏览器，您可以执行以下操作。

#seven {
    background-size: cover /* contain */ /* width in px/em/rem ie 50rem 20rem */
}

或者，您可以将图像放在容器内的img 标记中，使用fixed 或absolute 定位容器。接下来，给它一个宽度100% 和高度100% 或top, left, right, bottom 一个值0，同时隐藏溢出。最后，将img 宽度设置为width: auto 和height: 100% 和display: block.Example here。

【讨论】：

【解决方案3】：

使用css背景图片

 html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

否则，您可以尝试以下代码在 ie7 中正常工作的其他方式

css代码

#bg {
position: fixed;
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%;
}

 #bg img {
position:absolute;
top:25%;left:25%; 
right:25%;bottom:25%;
margin:auto; 
min-width:50%;
min-height:50%;}

html代码

<div id="bg">
  <img src="images/Body-bg.png" alt="">
</div>

【讨论】：

【解决方案4】：

只需添加 .bgwidth { width: 100%; } .bgheight { 高度：100%; }

这将消除问题

【讨论】：