Let’s say you have a web page with a solid pale blue background color with a background image positioned on top of it.

body { background: #a5c9e5 url(img.png) no-repeat 50% 300px; }
And this is the result:

See example 1 HTML.

Then you heard about CSS3 gradients and thought, “Wow! Now instead of a solid pale blue in the background, I can have a dark blue to pale blue fade!”

With this line of thinking, one may think that taking the ‘background-color’ value part of the shorthand above (‘#a5c9e5′), and replacing it with a ‘linear-gradient’ property would do the trick:

body { background: linear-gradient(top, #1e5799 0%,#a5c9e5 100%) url(img.png) no-repeat 50% 300px; }
But that’s not how it works. Despite the fact that you can define them using hexadecimal, rgb, or rgba, CSS background gradients are not like background colors, but instead are like background images.

So to get effect we described above on the same element, our browser would need to support multiple backgrounds, and we’d need to declare it like so.

body {
background:
linear-gradient(top, #1e5799 0%,#a5c9e5 100%),
url(img.png) no-repeat 50% 300px;
}
(Note: For the sake of simplicity, this example CSS is simplified without all the additional declarations that use vendor prefixes.)

But when testing that out, we only see the gradient.

See example 2 HTML

Where’s the background image? It’s there, but under the gradient. The order in which the background images are specified matters. If we rearrange the properties so that the image is first and the gradient is second:

body {
background:
url(img.png) no-repeat 50% 300px,
linear-gradient(top, #1e5799 0%,#a5c9e5 100%);
}
The image will show up as desired – on top of the gradient.

See example 3 HTML.

Think of CSS gradients not as a color, but as images. The guidelines for combining multiple background images apply to CSS gradients, too.

Resources
Source of train picture.

Tweet