css: make background repeat-y with growing child content?
- by mikemikemike
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;*/
}
