背景图片覆盖整个屏幕

Question

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

.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 。有什么办法让它覆盖整个屏幕吗？

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

Answer 2

方法一

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

方法二（使用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% */
  }
}

方法三（还有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/

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

Answer 3

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

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

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

Answer 4

最简单的答案，每次都有效：

html, body {
   overflow: auto;
}

背景图片覆盖整个屏幕

Background image cover whole screen

css

background

cover

screen