3

The background image is not appearing for the following CSS:

    background: -webkit-linear-gradient(#fcfcfc,#cbcbcb);
    background-image: url("../images/new/account-dropdown.png") no-repeat 100%;

How would I correctly do the above?

Still have not received a correct answer that works...in the meantime I am using an additional <img> tag that is absolutely positioned over the gradient.

David542
  • 104,438
  • 178
  • 489
  • 842
  • 2
    possible duplicate of http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients – Luca Jul 01 '12 at 13:14
  • This provides a good answer, but does not account for the `no-repeat 100%` part, which I need. – David542 Jul 01 '12 at 13:36
  • Does: `background-image: url("../images/new/account-dropdown.png") no-repeat 100%, -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */` (from @Luca's link) not work? – RichardTowers Jul 01 '12 at 13:45
  • No, that fails when I try it. – David542 Jul 01 '12 at 13:59

3 Answers3

0

Try this:

background-image: url("../images/new/account-dropdown.png");
background-size: 100%;
background-origin: content;
m93a
  • 8,866
  • 9
  • 40
  • 58
0

RichardTowers was close, but the gradient needs to be before the image:

 background-image:  -webkit-linear-gradient(top, #444444, #999999), url("../images/new/account-dropdown.png") no-repeat 100%;
Kevin
  • 4,225
  • 2
  • 37
  • 40
0

Try giving z-index property to display one background over the other.

Sameera
  • 1