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

Question

通过将背景图像应用于主体，我已使我的网站背景图像拉伸浏览器窗口的 100% 宽度和高度，并保持固定位置。此外，我创建的边框也将保持固定，使用这种方法：http ://css-tricks.com/body-border/

它工作正常，你可以在这里看到：http: //br-webdesigner.com/test/

唯一的问题是，即使我在 html 元素上有 10px 的填充，背景图像也一直延伸到浏览器窗口的边缘，而不是 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%;
}