arrière-plans CSS défiler vers la gauche et à droite

Question

CSS

#wrapper { 
     min-width: 800px; 
     max-width: 1000px; 
     height: 100%; 
     margin: 0 auto; 
     text-align: left; 
    } 
    #wrap-left { 
     height: 100%; 
     position: relative; 
     float: left; 
     width: 20px; 
     background: #FFF url('img/bodybg_left.jpg') repeat-y left; 
    } 
    #wrap-right { 
     height: 100%; 
     position: relative; 
     float: right; 
     width: 20px; 
     background: #FFF url('img/bodybg_right.jpg') repeat-y right; 
    } 

HTML

<div id="wrapper"> 
    <div id="wrap-left"><!-- LEFT BACKGROUND //--></div> 
    <div id="wrap-right"><!-- RIGHT BACKGROUND //--></div> 
    <table id="content"> 
    ... 
    </table> 
    <div style="clear: both;"></div> 
</div> 

fond à gauche et à droite sont entièrement affichées sur viewport initiale, mais lorsque la table est plus grande que la fenêtre (hauteur> 100%) et je défile vers le bas, l'arrière-plan n'apparaîtra pas en dessous de la fenêtre d'affichage initiale. Est-il possible de résoudre ce problème avec css ou dois-je utiliser une table html? J'ai essayé de fixer la position des divs d'arrière-plan à fixed mais j'ai besoin de les positionner par rapport à l'enveloppe qui a une largeur dynamique.

Cordialement, Ben

---

Solution, utilisez ceci ou vérifier les réponses ci-dessous!

CSS

#wrapper { 
     min-width: 800px; 
     max-width: 1000px; 
     min-height: 100%; 
     height: 100%; 
     margin: 0 auto; 
     text-align: left; 
     background: url('img/bodybg_left.jpg') repeat-y left; 
    } 
    #wrap-left { 
     background: url('img/bodybg_left.jpg') repeat-y left; 
     min-height: 100%; 
    } 
    #wrap-right { 
     background: url('img/bodybg_right.jpg') repeat-y right; 
     min-height: 100%; 
    } 
    #content { 
     width: auto; 
     margin: 0 20px; 
     border-collapse: collapse; 
     border-top: 1px solid #000; 
     min-height: 100%; 
    } 

HTML

<div id="wrapper"> 
    <div id="wrap-right"><div id="wrap-left"> 
    <table id="content"> 
     ... 
    </table> 
    </div></div> 
</div> 

Answer 1

Ma première réponse (s) ont été bousculés et ne fonctionnait tout simplement pas. Cette fois, je l'ai essayé correctement, avec deux background-image.

Live Demo (edit)

CSS:

html, body { 
    margin:0; padding:0; border:0; 
    height: 100% 
} 
#wrapper { 
    min-width: 800px; 
    max-width: 1000px; 
    min-height: 100%; 
    margin: 0 auto; 
    text-align: left; 
    position: relative 
} 
#wrap-left, #wrap-right { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
#wrap-left { 
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/250px-Color_icon_blue.svg.png') repeat-y top left 
} 
#wrap-right { 
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/250px-Color_icon_red.svg.png') repeat-y top right 
} 
#content { 
    position: relative 
} 

HTML:

<div id="wrapper"> 
    <div id="wrap-left"></div><div id="wrap-right"></div> 
    <table id="content"> 
     <tr><td>fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br /> 
     <!--fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg--> 
     </td></tr> 
    </table> 
</div>