How to use Vendor Properties in Multiple Backgrounds?

Question

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/archives/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.

Answer 1

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.

Answer 2

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*/