CSS gradients and background images

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.

7 thoughts on “CSS gradients and background images

  1. what if I have multiple background images on top of 1 gradient, and make it work for firefox, chrome, safari and opera?

  2. I have students using Notepad++ to develop web pages. A couple of students have created the same page as everyone else with an attached css file. However, theirs will only show part of the css style. Theirs will not display the background color and/or image. Their pages will display the font style, alignment, etc., but the background isn’t working. I’ve checked locations (file folder placement), that is correct. I’ve checked their css and their html coding, it is all correct. When we test the page the font color will flash, but will not work. We’ve tried changing colors, images, and even a new page. This is what they have on the html page In the CSS they have body {background-color:lightblue; font-family:arial; background-image:url(‘stripes_ back.gif’);} Any idea why it won’t work?

    1. @Memory I’m happy to help troubleshoot. Is this anywhere that is browsable by me? Also – what browser are the students using to test this?

  3. Nice article.

    I implemented this with cross browser support in one of my project.

    background: url("img.png") 11px 10px no-repeat; /*fall back for ie*/
    background: url("img.png") 11px 10px no-repeat,-webkit-gradient(linear, left top, right top, from(#ffffff), to(#f2f2f2));
    background: url("img.png") 11px 10px no-repeat,-webkit-linear-gradient(top, #ffffff, #f2f2f2);
    background: url("img.png") 11px 10px no-repeat,-moz-linear-gradient(top, #ffffff, #f2f2f2);
    background: url("img.png") 11px 10px no-repeat,-o-linear-gradient(top, #ffffff, #f2f2f2);
    background: url("img.png") 11px 10px no-repeat,-ms-linear-gradient(top, #ffffff, #f2f2f2);
    background: url("img.png") 11px 10px no-repeat,linear-gradient(top, #ffffff, #f2f2f2);

Comments are closed.