CSS background Collision

background:url("../images/header-icon.png") no-repeat 90% 50%;
background: -moz-linear-gradient(top, #FDFDFD 0%, #F8F8F8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFDFD), color-stop(100%,#F8F8F8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDFDFD', endColorstr='#F8F8F8',GradientType=0 );

How can I make these backgrounds not collide with each other? The url image doesn't show up - or i开发者_如何转开发f I reverse the order the gradient doesn't show up...is there a way to combine these to be in the same line to stop collision and cancelling each other out?

Thanks

---

Sure, just combine them like this:

/* for browsers that don't support CSS3 backgrounds */
background: url("../images/header-icon.png") no-repeat 90% 50%;

/* for Firefox */
background: url("../images/header-icon.png") no-repeat 90% 50%, -moz-linear-gradient(top, #FDFDFD 0%, #F8F8F8 100%);

/* for WebKit */
background: url("../images/header-icon.png") no-repeat 90% 50%, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFDFD), color-stop(100%,#F8F8F8));

/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDFDFD', endColorstr='#F8F8F8',GradientType=0 );

Having to specify the same image three times is messy, but there's really no way around it for compatibility reasons.

See: http://www.w3.org/TR/css3-background/#layering

The background of a box can have multiple layers in CSS3. The number of layers is determined by the number of comma-separated values in the background-image property.

Also see: http://www.w3.org/TR/css3-background/#the-background

---

consider this site to help generate css gradients http://www.colorzilla.com/gradient-editor/

Here's an example http://jsfiddle.net/pxfunc/LG2dU/

To note, the -webkit-gradient style was replaced with -webkit-linear-gradient in Chrome 10 & Safari 5.1 to be compatible with the W3C spec

For your gradient and image to both show you'll need to provide a color in your gradient with some alpha transparency either such as setting one of the gradient colors to transparent or using rgba or hsla formats

CSS:

/* Default -no gradient- */
background:url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* FF3.6+ */
background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(238,238,238,0.79) 53%, rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(53%,rgba(238,238,238,0.79)), color-stop(100%,rgba(255,255,255,0))),
   url("http://placehold.it/300/f00") no-repeat 90% 50%; 
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* Opera11.10+ */
background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* IE10+ */
background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#00ffffff',GradientType=0 ),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;
/* W3C */
background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(238,238,238,0.79) 53%,rgba(255,255,255,0) 100%),
    url("http://placehold.it/300/f00") no-repeat 90% 50%;