垂直拉伸背景图像不是规模，而不仅仅是覆盖 - 这可以实现吗？
[英]Stretching a background image vertically not in scale, not just cover - Can this be accomplished?
问题描述
EDIT: The answer would allow the background image to change it's height depending on the size of the body. 
编辑：答案将允许背景图像根据身体的大小改变它的高度。 if the body is 500px high, it should be 100% width, 500px height. 如果身体高500px，它应该是100％宽度，500px高度。 or 100% width 2500px height. 或100％宽度2500px高度。
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. 也许我错过了这条船，但我想弄清楚如何让我的背景图像与页面一起缩放。 The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site. 最终用户不希望背景图像是静态的（COVER），但图像应该随着他的内容在他的网站上获得的内容越大。
I'm guessing this can't be done with CSS alone. 我猜这不能单独使用CSS。 When I say I guess I've been through a mess load of different ways of doing this. 当我说我猜我已经经历了不同的方式来做这件事。
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height? 这只是一个简单的javascript / jquery，我获取body标签的高度，然后将其应用于背景图像高度？
If you need an example: 如果你需要一个例子：
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS 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/
This would need to work on multiple pages with different body heights 这需要在具有不同身高的多个页面上工作
EDIT: http://jsfiddle.net/WEat7/1/ Fixed widths on the divs to illustrate the concept. 编辑： http ： //jsfiddle.net/WEat7/1/固定宽度的divs来说明这个概念。 I apologize 我道歉
4 个解决方案
解决方案1
3 已采纳 2013-05-30 12:37:42
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
解决方案2
1 2013-05-30 12:44:39
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo 以下CSS应该修复背景图像并使其覆盖整个身体，无论宽度或高度如何 - 请参阅演示
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size . 但请注意，IE8 不支持 background-size 。
Edit: updated demo using following CSS 编辑：使用以下CSS 更新演示
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
解决方案3
0 2013-05-30 12:45:40
添加到你的身体css：
background-size:100% 100%;
解决方案4
0 2013-05-30 13:21:26
It seems that we need a wrap answer )) 似乎我们需要一个回答）））
It has been suggested above that background-size: 100% 100%; 上面已经提出background-size: 100% 100%; will stretch the background image to the full width and the full height. 将背景图像拉伸到全宽和全高。 And so it does. 它确实如此。
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/ 说你的内容很小（400px） - 背景图片只会覆盖400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/ 说你的内容真的很大（2500px） - 背景图片仍将覆盖整个高度 - http://jsfiddle.net/skip405/WEat7/8/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.