On Fri, Dec 24, 2010 at 9:27 PM, tee <[email protected]> wrote: >>> background-image: -moz-linear-gradient(bottom, #57b0d7, #87C9EB); >>> background-image: -webkit-gradient(linear,left top,left >>> bottom,color-stop(0, #57b0d7),color-stop(1, #87C9EB)); >> >> One of the above lines will be discarded as an error in Gecko and WebKit. > > Which one is that? Gradient effect shows up fine in both Safari and Chrome. > Trying to find the clue from Validator is not possible as it treated > everything as error. > >> >>> background-image: url(../images/base_images/icon-ui.png) ; >> >> This line overwrites the previous value of "background-image" rather >> than setting "background-image" to be multiple images. >> >> http://www.w3.org/TR/css3-background/#layering >> >> http://www.w3.org/TR/css3-background/#the-background-image >> >> describes the comma-seperated syntax you want. > > OK, so I see, two images are possible in the background, but one for > gradient and one for image is not possible especially no browser has native > support for CSS3 gradient yet.
Doesn't follow. moz-linear-gradient() and -webkit-gradient() are effectively alternate ways to declare an image and could be used wherever url() would be used in background-image. See also: http://dev.w3.org/csswg/css3-images/#gradients "A gradient is an image that smoothly fades from one color to another." My point was merely: background-image: url(foo); background-image: url(bar); is equivalent to: background-image: url(bar); not background-image: url(foo), url(bar); -- Benjamin Hawkes-Lewis ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [email protected] *******************************************************************
