垂直拉伸背景图像不是规模，而不仅仅是覆盖 - 这可以实现吗？

Question

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

也许我错过了这条船，但我想弄清楚如何让我的背景图像与页面一起缩放。 最终用户不希望背景图像是静态的（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/固定宽度的divs来说明这个概念。 我道歉

Answer 1

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

http://jsfiddle.net/WEat7/

Answer 2

以下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%;
}

Answer 3

添加到你的身体css：

background-size:100% 100%;

Answer 4

似乎我们需要一个回答）））

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

说你的内容很小（400px） - 背景图片只会覆盖400 - http://jsfiddle.net/skip405/WEat7/7/

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

垂直拉伸背景图像不是规模，而不仅仅是覆盖 - 这可以实现吗？

问题描述

4 个解决方案

解决方案1
3 已采纳 2013-05-30 12:37:42

解决方案2
1 2013-05-30 12:44:39

解决方案3
0 2013-05-30 12:45:40

解决方案4
0 2013-05-30 13:21:26

垂直拉伸背景图像不是规模，而不仅仅是覆盖 - 这可以实现吗？

问题描述

4 个解决方案

解决方案1 3 已采纳 2013-05-30 12:37:42

解决方案2 1 2013-05-30 12:44:39

解决方案3 0 2013-05-30 12:45:40

解决方案4 0 2013-05-30 13:21:26

解决方案1
3 已采纳 2013-05-30 12:37:42

解决方案2
1 2013-05-30 12:44:39

解决方案3
0 2013-05-30 12:45:40

解决方案4
0 2013-05-30 13:21:26