Should CSS3 gradients be applied using a background image or background only?

Question

When using CSS3 gradients should we use background-imageor just backgroundto apply them?

eg:

background: #CCC;
background: -moz-css3-gradient-code;
background: -webkit-css3-gradient-code;

or

background: #CCC;
background-image: -moz-css3-gradient-code;
background-image: -webkit-css3-gradient-code;

Answer 1

It depends.

It:

background: #CCC;
background: -moz-css3-gradient-code;
background: -webkit-css3-gradient-code;

replace the background color with a gradient. Although this:

background: #CCC;
background-image: -moz-css3-gradient-code;
background-image: -webkit-css3-gradient-code;

keep the background color and make a gradient over it.

I think the default behavior with gradient backgrounds is for the browser to fill the element area with them, so in the second example, the background color will be hidden from the gradient by default. But it background-sizecan change this, and gradients can be transparent or translucent (through rgbacolors).

, , , - , , .