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

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