垂直拉伸背景圖像不是規模，而不僅僅是覆蓋 - 這可以實現嗎？
[英]Stretching a background image vertically not in scale, not just cover - Can this be accomplished?
問題描述
編輯：答案將允許背景圖像根據身體的大小改變它的高度。 如果身體高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/1/固定寬度的divs來說明這個概念。 我道歉
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
以下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%;
}
解決方案3
0 2013-05-30 12:45:40
添加到你的身體css：
background-size:100% 100%;
解決方案4
0 2013-05-30 13:21:26
似乎我們需要一個回答）））
上面已經提出background-size: 100% 100%; 將背景圖像拉伸到全寬和全高。 它確實如此。
說你的內容很小（400px） - 背景圖片只會覆蓋400 - http://jsfiddle.net/skip405/WEat7/7/
說你的內容真的很大（2500px） - 背景圖片仍將覆蓋整個高度 - http://jsfiddle.net/skip405/WEat7/8/
高度為100％的主體（帶有背景圖片）：覆蓋整個頁面，而不僅僅是視口-盡可能不使用JS
[英]Body with height 100% with background-image: cover to fill enire page not just a viewport - without js if possible
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.