如何使div bg图像适合全屏并允许滚动下面的内容

Question

在过去的两天里，我一直在研究这个话题，尝试了250+代码的变体，我束手无策，这就是为什么我现在在这里……我觉得我离解决方案已经很近了，所以希望这里有人能把它放在边缘上……我是CSS的新手，所以如果我在这里走错了路，我道歉…

我正在努力实现一个你可以在Stumbleupon.com的主页上看到的效果。加载页面时，无论分辨率如何，bg图像都完全适合浏览器的可视区域。bg图像不是固定的，因此您可以向下滚动查看更多内容。您可以在http://www.bakkenbaeck.no/ ...again原始图像上看到完全相同的效果，并且不会与下面的内容一起修复。

当我在这里遇到StackOverflow问题和答案时，我以为我终于找到了答案。Making a div fit the initial screen

我按照指示走了过去，差一点就到了……但是没有雪茄。

你可以在www.konnect.co上查看我设置的测试域

我为这张bg图像输入的代码是

#wrapper-8 { 
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;

background: url(http://bakkenbaeck.no/content/01-work/01-easybring/01.jpg)
no-repeat     center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
}

这将在我检查过的两个浏览器中完美地显示图像。然而，bg图像与页面上第二个div的内容完全重叠。我创建了第二个div，给它一个bg颜色，并添加了一些内容进行测试，从上面的div看，它是隐藏在bg图像后面的。如果您将浏览器调整到较小的大小，它将允许您在bg图像变小时开始滚动。这里的bg图像div高度是不是遗漏了什么？我已经尝试了几个高度选项，但不能得到任何改变。任何帮助都将不胜感激。

Answer 1

以下是您的解决方案：

对两个类都使用绝对定位，并将内容放在它后面的top: 100%！

​

    .image {

      position: absolute;

      width: 100%;

      height: 100%;

      background-image: url(images/bg.jpg);

      background-size: cover;

      background-color: purple;

    }

    .content {

      position: absolute;

      top: 100%;

      width: 100%;

      height: 200px;

      background: yellow;

    }

<div class='image'></div>
<div class='content'>Here is Your solution!!! :-)</div>

​

Answer 2

我正在努力实现和你一样的目标(至少我是这么认为的)。像这样的东西对你有用吗？

http://jsfiddle.net/tKNzR/

html, 
body {
   height:100%;
}

#header-div {
   height:100%;
   width:100%;
   position:relative;
   top:0;
   left:0;
}

要使#header-div中的图像始终充满整个屏幕，您可以使用一个名为backtstretch的jquery插件。

Answer 3

这看起来很简单，对我来说也很有效。

我看了看http://www.stumbleupon.com/，使用chrome的开发者模式得到了他们曾经使用过的技巧。body中的第一个div具有类homepage，该类使用以下属性

.homepage {
    min-height: 720px;
    position: relative;
    height: 100%;
    background: url(https://nb9-stumbleupon.netdna-ssl.com/zuZ2r1FsBTumc2VqMc6CtA) center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    color: #fff;
}

这里的陷阱是background-attachment: fixed;。这将确保图像不会随着内容一起滚动。

你可以在这里找到它的详细信息：

http://www.w3schools.com/cssref/pr_background-attachment.asp