Does CSS3 support using both an image and a gradient for the background of a single <div>?

Question

I know you can do multiple backgrounds on a single <div> in CSS3, but is it possible to mix an image-referencing background (i.e. url(...)) with a gradient generating background (e.g. -moz-linear-gradient(...))?

If so, what is the syntax?

If not, what is a best-practice to achieve the same result?

Thanks.

Answer 1

I assume you are trying to conditionally use gradients where supported, but image otherwise?

If so, then one way would be to do it via Javascript -- for example:

document.getElementById("whatever").style = "url(...)";

I'm not sure exactly how to check for the browser type, but that should be a simple Google search.

---

However, if you are trying to make it so that the image is superimposed on the gradient, but transparent (so that some of the gradient is showing through), you could try what is described here: http://www.css3.info/introduction-opacity-rgba/

Note that it uses 0.0-1.0 for alpha, not 0-255.

Answer 2

You can!

background: -moz-linear-gradient(-45deg, rgba(0,0,255,0), rgba(0,0,255,1)), url("image");

which can be seen live at http://software.hixie.ch/utilities/js/live-dom-viewer/saved/675.

Note, of course, that CSS gradients are still in flux.