Kok*_*oko 11 html css background-image
我想创建一个带有背景图像的网站,该网站总是填满整个窗口,即使内容可以垂直滚动.
我使用background-size 创建了这个JSFiddle:cover来将背景图像缩放到窗口.
只要内部的div小于窗口,它就可以工作.如果您垂直滚动,背景图像将不再填充页面,而是显示白色/灰色区域.
所以我的问题是:如何将100%背景图像与滚动内容结合起来？这是我的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>
Mr.*_*ien 17
使用 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;
}
此外,我没有得到你position: absolute;在包装元素上使用的原因,通常你应该使用position: relative;