here's my basic markup:
<div class="RuggedBox">
Variable length content goes here...
</div>
The CSS
.RuggedBox
{
background-image: url('LeftRuggedEdgeHeightGreaterThan1px.jpg');
background-repeat: repeat-y;
}
I know the above does nothing much. I know that the box will stretch vertically as needed, however, it will stop "whenever", which will result in the last iteration of the graphic to cut off (clip). I want the div to stretch long enough so that the last iteration of the graphic will be fully shown. (In case you're wondering, if the last repetion clips, then the rugged line will not meet the corner of the div box, which I want to happen.)
I don't want JavaScript hacks. I don't want a fixed height. So, what CSS and/or markup do I need for this?