CSS滾動背景左右

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> 

左側和右側背景完全顯示在初始視口，但是，當該表是較大的，則視口（高度> 100％），然後向下滾動，背景不會顯示在初始視口下方。是否有可能解決這個問題與CSS還是我需要使用HTML表？我試圖設置背景div的位置固定，但我需要讓它們相對於具有動態寬度的包裝器進行定位。

問候， 本

---

解決方案，使用或檢查以下答案！

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

我的第一個答案（S）被送往和根本不起作用。

這一次，我實際上試了一下，有兩個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>