Background image 100% fixed position issue - html

Question

I've made my website background image stretch 100% width and height of the browser window, by applying a background image to the body, and remain fixed position. Also, I've created borders that will also remain fixed, using this method: http://css-tricks.com/body-border/
It works ok as you can see here: http://br-webdesigner.com/test/
The only problem is, the background image is stretching right to the edges of the browser window, instead of to the bounds of the body element (or the green area), even though I've got 10px padding on the html element.
It seems making background-size 100% makes the size 100% of the browser window, not of the containing element.
Is there a way to get around this?
Thanks,

Answer 1

So I altered your CSS a bit try using this:
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%;
}