How to use Vendor Properties in Multiple Backgrounds?

I want to use multiple backgrounds in css, which are currently supported by Firefox 3.61, Chrome/Safari, supposedly Opera10.5 (doesn't run on gnu/linux). It is working fine, however i would like to use linear-gradients as a background. it works ok for Firefox, doesn't work at all with Chrome, yet i can't figure out how to make it work for both at the same time. any clues? http://snook.ca/archive开发者_高级运维s/html_and_css/multiple-bg-css-gradients came the closest to match what i need, but i couldn't get it to work with chrome yet.

---

I'm not positive, but my guess is that chrome just doesn't support that yet. Although multiple background images and css gradients on one element sure sounds nice, I would still recommend using multiple elements with one background image each. For some reason, there are still people out there who use IE which is not CSS3 friendly at all.

---

this worked for me. it seems that placing mozilla after webkit makes webkit acknowledge the existence of a second parameter for background-image and unset its older declaration. so i'm placing the -moz declaration before -webkit.

  background-image: url("../images/block_stripe_bg.png"); /* for older browsers */
  background-image: url("../images/block_stripe_bg.png"), -moz-linear-gradient(center top, white, #dddddd); /* works for mozilla, ignored by other browsers */
  background-image: url("../images/block_stripe_bg.png"), -webkit-gradient(linear, center top, center bottom, from(white), to(#dddddd)); /* works for webkit, ignored by other browsers */
  background-repeat: repeat; /* older browsers */
  background-repeat: repeat, no-repeat; /* newer browsers should apply this to both backgrounds*/