css: make background repeat-y with growing child content?

Question

I Have a three column layout. The center div is a container which holds all of my content. The outer columns is just a .png that fades into the body's background (left and right respectively). I want the .png to repeat-y to grow with the center container's content. It will only print the image once, and ignores the repeat-y. If I specify a height to the outside columns, it will print, but only to the specified height. I tried height: 100%, which does not work. Here is my code:

#ultra_contain {
        text-align:left;
        width:900px;
        padding: 0px;
        position:relative;
        margin:0px auto;
        margin-top:0px;
        /*border:1px dashed #996;*/

        }
        #gradientleft {
            float:left;
            position:relative;
            background: url("../i/gradient_left.png")  repeat-y;
            /*border:1px dashed #996;*/
            }
            #gradientright {
                float:right;
                position:relative;
                background: url("../i/gradient_right.png") repeat-y;
                /*border:1px dashed #996;*/
                }

    #container {
        text-align:left;
        width:700px;
        position:relative;
        margin:5px auto;
        margin-top:0px;
        background:#fff;
        /*border:1px dashed #996;*/
        }