views:

16

answers:

1

In css you may normally set both a background-image, and a background-color, and the image will be rendered on top of the color.

#someDiv
{
   background-image: url(arrow.png);
   background-color: blue;
}

This will cause #someDiv to have a blue background with the arrow.png image above.

However, what if I want to use firefox's -moz-linear-gradient to do a gradient for the background, then is there a way to make the image render over this gradient?

EDIT:

The MDC states that gradients replace the background-image tag. So in that case, I guess a follow up question is is it possible to specify two background images and have them render one on top of another?

+1  A: 

This example on the Mozilla site has background gradients under background images:

https://developer.mozilla.org/en/css/multiple_backgrounds

DHuntrods
Insanely badass! This is why I love gecko :)
Razor Storm
I know! I can't wait till all browsers do this =D
DHuntrods
Awesome webkit browsers support it as well! (Firefox, Chrome, and Safari are the entirety of my entire targeted audience, I'm lucky I don't have to cater to IE)
Razor Storm