Question

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 if 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

Answer 1

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