html - 背景图100%固定位置问题

Question

我通过将背景图像应用到正文并保持固定位置，使我的网站背景图像拉伸(stretch)了浏览器窗口的 100% 宽度和高度。此外，我使用以下方法创建了也将保持固定的边框:http://css-tricks.com/body-border/

如您所见，它工作正常:http://br-webdesigner.com/test/

唯一的问题是，即使我在 html 元素上填充了 10 像素，但背景图像一直延伸到浏览器窗口的边缘，而不是延伸到 body 元素的边界(或绿色区域) .

似乎将 background-size 设置为 100% 会使浏览器窗口的大小变为 100%，而不是包含元素的大小。

有办法解决这个问题吗？

谢谢，

Answer 1

所以我稍微修改了你的 CSS，尝试使用这个:

html{

}

body{
 padding:30px;   
background:url(images/bg2.svg) no-repeat fixed;
background-size:100% 100%;
margin:0;
}

.site-border{
background:#352e2e;
z-index:10;
}

#top{
position:fixed;
top:0;
left:0;
width:100%;
height:10px;
}

#bottom{
position:fixed;
bottom:0;
left:0;
width:100%;
height:10px;
}

#left{
    padding:10px;
position:fixed;
left:0;
top:0;
width:10px;
height:100%;
}

#right{
    padding:10px;
position:fixed;
right:0;
top:0;
width:10px;
height:100%;
}