背景图片覆盖整个屏幕答案

【问题标题】：Background image cover whole screen背景图片覆盖整个屏幕
【发布时间】：2015-05-17 00:30:36
【问题描述】：

在http://www.jeroenvanderwaal.com 的主页上，我试图让背景图像覆盖整个屏幕。我无法找出为什么它没有覆盖但在底部留下一个空白空间。到目前为止的代码：

.page-id-4 #main {
background-image: url(http://www.jeroenvanderwaal.com/wp-content/uploads/2015/03/achtergrond2.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top: 60px;
padding-bottom: 0px;
}

我只想要此页面的背景，因此需要 .page-id-4 。有没有办法让它覆盖整个屏幕？

【问题讨论】：

标签： css background screen cover

【解决方案1】：

给你，只需在 html 标签中设置背景

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;
}

【讨论】：

这不起作用 OP 正在使用 wordpress，您必须在上有一个类或 id 才能仅针对主页。
@user3354767 您将在本页底部 jeroenvanderwaal.com/404 看到该背景的一部分，因为它的内容区域很短

【解决方案2】：

如果您不想让所有子页面都显示主页背景，您可以这样做：

html {
    height: 100%;
}
body {
    min-height: 100%;
}

body.home {
    background: url(/wp-content/uploads/2015/03/achtergrond2.jpg) no-repeat center center fixed;
    background-size: cover;
}

您可以放心地删除所有前缀，对于任何现代浏览器都没有问题。

【讨论】：

【解决方案3】：

方法一

    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;
    }

方法2（使用CSS）

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

方法3（也是CSS）

<div id="bg">
   <img src="images/bg.jpg" alt="">
</div>

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

方法 4(JQuery)

<img src="images/bg.jpg" id="bg" alt="">

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

参考https://css-tricks.com/perfect-full-page-background-image/

它有很多全屏背景的技巧。

【讨论】：

这应该是评论吧？
@已根据您的评论编辑