Question

Which is the correct property to use for a CSS gradient? “background” or “background-image” as displayed below. They both work in all 5 browsers (in the versions I have). I’ve seen multiple tutorials and some use “background” and others use “background-image” but none of them discuss why one method is better then the other.

Neither of them validate at http://jigsaw.w3.org/css-validator/#validate_by_input

.gradient {
    background-color: #1a82f7;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
    background: -moz-linear-gradient(top, #2F2727, #1a82f7);
    background: -ms-linear-gradient(top, #2F2727, #1a82f7);
    background: -o-linear-gradient(top, #2F2727, #1a82f7);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#2F2727, endColorstr=#1a82f7);
}

Or This one:

.gradient {
    background-color: #1a82f7;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
    background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
    background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
    background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
    background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#2F2727, endColorstr=#1a82f7);
}

Answer 1

I do not believe using background is any different than using background-image. Basically it’s like background: url('image.png'); and background-image: url('image.png') — they’re the same thing, it’s just that background is a shorthand property that allows you to specify several background properties like background-repeat, background-color, and of course background-image.

So basically the gradient should be specified as a background-image, using background is no different, just another way of specifying it.

As for the W3C validator issue, I think it’s because the gradient “functions” all use browser-specific prefixes. I expect that those functions won’t become officially-recognizable until HTML5 becomes official.

Hope that helped in any manner.