Question

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?

Answer 1

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

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