CSS Scrolling backgrounds left and right

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>

left and right background are fully displayed on initial viewport, but when the table is larger then the viewport (height > 100%) and I scroll down, the background won't show below the initial viewport. Is it possible to solve this issue with css or do I need to use a html table? I tried to set the position of the background divs to fixed but I need to have them positioned relative to the wrapper which has a 开发者_如何学JAVAdynamic width.

Regards, Ben

Solution, use this or check answers below!

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>

My first answer(s) were rushed and simply didn't work.

This time, I actually tried it properly, with two 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>