I want to use CSS3 gradients for my color and then apply a background-image to apply some sort of light transparent texture. Is this possible?
A:
For webkit, you can use a gradient only as a substition for background-image. So not possible, unless you use multiple elements.
jholster
2010-03-23 22:45:12
That's a shame, I'd have hoped for using a CSS Gradient as a BG color, then maybe could use some Transaprent PNG as an image, for mixing. That would be great!
Kyle Sevenoaks
2010-03-24 12:53:28
That would be cool. Maybe a technical issue? Still, there are pretty amazing stuff happening in webkit development, such as http://webkit.org/blog/181/css-masks/
jholster
2010-03-24 21:44:04
+12
A:
Actually, yes, you can.
background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -moz-linear-gradient(top, #8bc43e, #65a521); /* FF3.6 */
background-image: url(IMAGE_URL), -webkit-gradient(linear,left top,left bottom,color-stop(0, #a),color-stop(1, #65a521)); /* Saf4+, Chrome */
The 1st line sets a flat background color. The 2nd line sets the background image fallback. These 2 lines are what anything that doesn't understand the next 2 will use.
The 3rd line sets a background image and gradient in mozilla. The 4th line is for webkit browsers.
See http://www.w3.org/TR/css3-background/#layering for more information about it.
Gidgidonihah
2010-03-30 16:59:59
Thanks for your answer, any ideas of how to then control the `background-position` just for the image and not the gradient?
adardesign
2010-07-07 18:13:22
@Gidgidonihah: thanks for this, excellent information. | @adardesign: use the background shorthand. Modifying the above example, it would be: background: url(IMAGE_URL) no-repeat left top, [appropriate-gradient];
RussellUresti
2010-07-16 16:39:17
A:
You can try using multiple backgrounds (CSS3 feature).
Details in http://designshack.co.uk/articles/introduction-to-css3-part-6-backgrounds.
Edu
2010-09-01 19:50:08