1

编辑：答案将允许背景图像根据身体的大小改变它的高度。如果 body 是 500px 高，它应该是 100% 宽，500px 高。或 100% 宽度 2500 像素高度。

也许我错过了这艘船，但我试图弄清楚如何让我的背景图像随页面缩放。最终用户不希望背景图像是静态的 (COVER)，但图像应该随着他的网站上的内容越大而缩放。

我猜这不能单独使用 CSS 来完成。当我说我想我已经经历了很多不同的方式来做到这一点。

这只是一个简单的 javascript/jquery，我在其中获取 body 标记的高度，然后将其应用于背景图像高度？

如果你需要一个例子：

<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>

CSS

body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }

http://jsfiddle.net/WEat7/

这将需要在具有不同正文高度的多个页面上工作

编辑： http: //jsfiddle.net/WEat7/1/ 固定宽度的 div 来说明这个概念。我道歉

4

4 回答 4

3 
body {
    background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; 
    background-size:100% 100%;
}

http://jsfiddle.net/WEat7/

于 2013-05-30T12:37:42.750 回答
1

下面的 CSS 应该修复背景图像并让它覆盖整个身体，无论宽度或高度如何 - 参见演示

body {
    background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
    background-size:cover;
}

但是，请注意 IE8不支持 background-size.

编辑：使用以下 CSS更新演示

body {
    background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
    background-size:100% 100%;
}
于 2013-05-30T12:44:39.150 回答
0

看来我们需要一个包装答案））

上面已经建议background-size: 100% 100%;将背景图像拉伸到全宽和全高。它确实如此。

假设您的内容很小（400 像素） - 背景图像将仅覆盖 400 - http://jsfiddle.net/skip405/WEat7/7/

假设您的内容真的很大（2500px） - 背景图像仍将覆盖整个高度 - http://jsfiddle.net/skip405/WEat7/8/

于 2013-05-30T13:21:26.463 回答
0

添加到你的身体CSS：

background-size:100% 100%;
于 2013-05-30T12:45:40.030 回答