Why not use the picture? Yes, this is not always convenient, but in most cases it is a good fix, and most importantly, it works in all browsers that do not understand gradients, and not only in IE. Determine whether the browser is able to do gradients or not, for example, modernizer: check for css3 support . If you can, then we do the code. If not, ship the picture.
1) Guidance. If it is able to: hover load another image with a different gradient, the time it takes to load is significant. And the first time the effect does not work immediately. It is not just a picture that is being repaired, but a sprite: we cut not 32px tall, but 64px. Where the first 32px is the gradient in the normal state, and the second 32px is the gradient for guidance. In the hover state, now we are changing not the image, but the background-position . So here is the limit on height. If we do not exactly know the height (32px in the example), then the sprite does not roll. Or we are looking for a way to pull both images at once.
2) Unknown / gone height. The picture in this case will be mated. Make a height of 33px and the repeated image will ruin everything. Output: repeat the picture only in one dimension (width), and in height press it to the bottom. The remaining pixels from the top are filled with the color of the beginning of the gradient in the picture. Restriction: with a highly variable height, say several times, it will not work, and the gradient will be only at the bottom. Yes, and it is worth thinking about whether a gradient is appropriate there at all, if it pulls it like that.
3) JS disabled. Yes, it does not work at all. This situation is quite rare and generally hardly anything can be done in this case, except to just use color.
Question to the author: do you know the height in your case? Or is it determined by the content?