Background Images & Linear Gradients

Question

I have a div with a background image positioned on the top right and a background color for the remainder, is it possible to use a linear gradient instead of the color?

Answer 1

Yes, possible. You can use the following style definition:

background-image: url(/images/mybg.png) top right, linear-gradient(top, #444444, #999999);

Also, see this post for a cross browser compatible solution.

Answer 2

You can also create a gradient bitmap, cut a thin slice and use it as a background image. Below I have a thin horizontal image than blends from left to right, it repeats vertically:

style="width: 110px; background-image: url(BlendLeft.ico);
                background-repeat: repeat-y;