>>>
>>> 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 <i>it 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: [email protected]
*******************************************************************
