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?

score 2 · Accepted Answer · answered Dec 23 '11 at 03:27

2

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.

answered Dec 23 '11 at 03:27

techfoobar

65,616
14
114
135

Oops! Missed that out. I had copied the URL but forgot to paste it.. :) Here it is: http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients – techfoobar Dec 23 '11 at 04:42
PS The multiple question marks may have made me look like I was mad, but I wasn't, they were necessary to add that post... :) – henryaaron Dec 23 '11 at 21:14

score 0 · Answer 2 · answered Dec 23 '11 at 03:59

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;

Background Images & Linear Gradients

2 Answers2