4

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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Ethan
  • 9,558
  • 5
  • 27
  • 24

2 Answers2

4

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.

Ms2ger
  • 15,596
  • 6
  • 36
  • 35
-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.

Tim Čas
  • 10,501
  • 3
  • 26
  • 32