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);
OK, let me explain it in details:
Despite that I found it odd the Gradient is declared in the background-image,
my first understanding about CSS3 Gradients is that iit is not the value of
background-image property/i. I thought it was something like this:
background-gradient: -moz-linear-gradient(bottom, #57b0d7, #87C9EB);
I thought I could make an image (placed in background-image) and gradient
showed up in a single div. More strictly, I want a h2 tag that I used as an
accordion trigger to have both an arrow icon and gradients using background
colors.
My first attempt was:
div { background-color: #57b0d7;
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));
background-image: url(../images/base_images/icon-ui.png) ;
background-repeat: no-repeat;
background-position: 99% -109px;
}
Vendor prefixes are used since no browser yet supporting native CSS3 gradient,
but background-image: url(foo); is supported by all browsers, so the above
rule seems right, though deep down I suspect the logic is lacking. Sure it
doesn't work!
You posted these two urls,
http://www.w3.org/TR/css3-background/#layering
http://www.w3.org/TR/css3-background/#the-background-image
Which show these examples:
div { background-image: url(tl.png), url(tr.png) }
div {background-image: url(flower.png), url(ball.png), url(grass.png);}
SO I made two more foolish attempts that I didn't think could work anyway.
background-image: -moz-linear-gradient(bottom, #57b0d7, #87C9EB),
url(../images/base_images/icon-ui.png);
background: -moz-linear-gradient(bottom, #57b0d7, #87C9EB),
url(../images/base_images/icon-ui.png) no repeat 99% -109px;
Still, I am reserving for this one (thinking that maybe the above two couldn't
work because one (gradient) is with vendor prefixes and one (url(my-image))
doesn't in a single background-image property, so both Gecko and Webkit ignore
the rules ):
div {background-image: linear-gradient(bottom, #57b0d7, #87C9EB),
url(../images/base_images/icon-ui.png); }
But I can't find out unless there is a browser supports the native CSS3
gradients that allows me to test.
I searched high and low before I posted the question, and I searched it again
after I saw your message, all I read in the second time confirmed that I was
not missing anything. Maybe I am still...I guess the only way to confirm that I
am not missing anything obviously is someone or you can kindly make an example
page, show me the working code with the result that I wanted to achieve.
W3C CSS3 spec doesn't showed an example that shows both background image and
gradient example together - it's odd there is no such example if what I want to
do is part of the spec. All other blog sites have very similar codes regarding
the usage of moz-linear-gradient() and -webkit-gradient() - and many, I suspect
are copycat articles that make money from media ad and google ads by stealing
people's content.
Co-incidently last email of The links for light reading from Russ has an
article from 24ways about the gradients - a site that provides quality
articles, so I hopped over and found nothing new that I thought I might be
missing.
http://24ways.org/2010/everything-you-wanted-to-know-about-gradients
And an article in CSS3 tricks: http://css-tricks.com/css3-gradients/
Both suggest that the background image (background-image:
url(my-image-made-from-fireworks.png)) is a fall back (the CSS3 tricks' article
explains it better), and these two articles are the closest explanation to why
I couldn't have both gradient and my-image-made-from-fireworks.png show up
together in the background-image property.
Happy finally-Christmas-is-over!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
