Image de fond 100% position fixe numéro

Question

J'ai fait en sorte que l'image de fond de mon site Web s'étire sur 100% de la largeur et de la hauteur de la fenêtre du navigateur, en appliquant une image de fond au corps. En outre, j'ai créé les frontières qui seront également irrévocables, en utilisant cette méthode: http://css-tricks.com/body-border/

Il fonctionne bien comme vous pouvez le voir ici: http://br-webdesigner.com/test/

Le seul problème est, l'image d'arrière-plan stretching droit aux bords de la fenêtre du navigateur, au lieu des limites de l'élément body (ou de la zone verte), même si j'ai 10px padding sur l'élément html.

Il semble que faire 100% de la taille de l'arrière-plan soit 100% de la taille de la fenêtre du navigateur et non de l'élément conteneur.

Existe-t-il un moyen de contourner ce problème?

Merci,

Answer 1

Je modifié votre CSS un peu essayez d'utiliser ceci:

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%; 
}