Background gradient fill for flexible div's, either using css or images?

Question

I am using a fixed height image to fill a div with gradient color using something like: background:transparent url(green_bg.gif) repeat-x scroll 0 0;

However it only fills a height equals the image height. What's the best way to fill the backround of a div which changes in height, according to amount of text inside it, either using images or using css?

Answer 1

I would say background SVG. But afaik they are only supported in safari atm.

or maybe webkit has a property that does the gradient. Or canvas if you really need it.

Answer 2

I think what you're looking for is a div to be filled with a background image (which is a gradient) and then the rest of the way with a solid color?

If so, in photoshop (or the image editor of your choice), get the hex of the last pixel in your gradient. For argument's sake, let's say it is #FF0000. Then do this:

.myDiv {
    background: #FF0000 url(green_bg.gif) repeat-x 0 0;
}

This will fill your background with #FF0000 (red) and overlay your background image on top of it, repeating horizontally (x-axis) starting at the top of your div. The way to make the red background show is to increase the amount of content in your div.

Also, if you want to make sure that a certain portion of your gradient is always showing, you can increase the padding-top in your CSS.

.myDiv {
    background: #FF0000 url(green_bg.gif) repeat-x 0 0;
    padding-top: 20px;
}

If this isn't what you're getting at, please clarify in your question.