Gradient background question

I have a mock up with a gradient background for a 3 column text area. Is there a way to have that expand if more text gets added:

You can do gradients with CSS3, but that won’t work on all browsers and isn’t as fancy as that bg image you have. The best thing to do here is to finish the bg image with a specific color, and then set the background color of the container to the same value, so that if the container height grows, it won’t be obvious that the bg image is not as tall as the container.

Yep, that’s what I’d do (and have done many times) too. Just make the bg colour of the div the same colour as the bottom colour of the gradient, then it will epxand down as far as you want and make the bottom corners that colour too.

I’d do much as Ralph said and make the bottom round corner section a solid colour then I’d add a wrapper to the top section with a repeating-y slice (with borders) that matches the bottom of the gradient and lies under the top section and is only revealed when the text stretches downwards. That assumes you are not using transparent corners otherwise the repeat would show through at the corners.

I am using transparent corners. Is there a way to have the corners transparent and the div fill as it stretches? For example if you look at the newsletter area here you’ll see the dark background behind the two top corners - the bottom corners are supposed to look rounded (transparent) but the background repeat is showing

I guess it was a pretty stupid question - I can just match the background behind the corners to the background on the page. :blush: