如何使用100％CSS背景图像与滚动内容？ [英] How to use 100% CSS background-image with scrolling content?
问题描述
我想创建一个网站，其背景图片总是填满整个窗口，即使内容可以垂直滚动。
I want to create a site with a background image that always fills the entire window, even if the content can scroll vertically.
我创建了 this JSFiddle 使用background-size：cover将背景图像缩放到窗口。
I have created this JSFiddle using background-size:cover to scale the background-image to the window.
它工作，只要divs里面小于窗口。
如果你垂直滚动，背景图片不再填充页面，并显示一个白色/灰色区域。
It works, as long as the divs inside are smaller than the window. If you scroll vertically, the background image does not fill the page anymore, and shows a white/grey area instead.
所以我的问题是：我结合100％的背景图像和滚动内容？
这是我的CSS：
So my question is: how can I combine a 100% background image with scrolling content? This is my CSS:
html {
height: 100%;
margin:0px;
background-color:#999999;
background-image: url(http://s22.postimg.org/e03w9stjl/main_bg.png);
background-position:center;
background-repeat:no-repeat;
background-size: cover;
}
body {
min-height: 100%;
margin:0px;
}
#appcontainer {
position: absolute;
background-color: rgba(255, 255, 255, 0.7);
width:560px; height:2220px;
left:20px; top:20px;
}
HTML：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="appcontainer">
This div causes the background image to stop scaling to the page.
</div>
</body>
</html>
推荐答案
固定;
Use background-attachment: fixed;
html {
height: 100%;
margin:0px;
background: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg) no-repeat center center;
background-size: cover;
background-attachment: fixed;
}
t：为什么你在包装器元素上使用 position：absolute; ，通常你应该使用 position：relative;
这篇关于如何使用100％CSS背景图像与滚动内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
