How can I apply a gradient over a background with CSS?

Question

I'm getting my feet wet with CSS3 and I'm doing my best to convert a Photoshop comp to HTML.

I have multiple instances of a background (using background url) with differing heights and I'd like to apply a gradient on top of that background using rgba gradients (using the alpha channel). I'd obviously like to stay away from a static background image with the gradient built into the pixels.

Is there a way to do this in CSS by 'stacking' the gradient on top of the background url?

I'm guessing if I can't do it in one element, I would put a container inside my background element, float it and make the width and height fill the background element, but that seems pretty messy.

Any advice is appreciated! Thanks for your time!

Here are two examples of the same background and gradient but at different heights: a nav and a footer

The code would look something like this:

<nav>
 <ul>
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  <li>Menu item 3</li>
  <li>Menu item 4</li>
 </ul>
</nav>

style:

nav {
  background : url('repeating-background-image.png') repeat;
  background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /*    Chrome10+,Safari5.1+ */
}

Answer 1

Is there a way to do this in CSS by 'stacking' the gradient on top of the background url?

Yes: CSS3 allows multiple background images, separated by commas.

As gradients behave like images, you can use them in conjunction with background images:

div {
    width: 400px;
    height: 400px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))), url(http://www.pauldwaite.me.uk/images/professional.jpg); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%), url(http://www.pauldwaite.me.uk/images/professional.jpg); /*    Chrome10+,Safari5.1+ */
}

• http://jsfiddle.net/kReNL/

This doesn't work in IE 8 or earlier, but then neither do CSS gradients. (Although Microsoft's filter property works in IE 8 and earlier, and that does support gradients with alpha transparency - see Can you use rgba colours in gradients produced with Internet Explorer’s filter property?).

Answer 2

http://jsfiddle.net/8gvZM/

background: #ffffff; /* old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */

and make a div above it with the background url on a lower opacity.

Is that what you mean?

Answer 3

Use CSS :before to create an additional (pseudo) element sitting on top of the original element.

The original element would have the image background, and the :after element would have the gradient, with an opacity setting so that the original element shows through it.

div {
    width: (whatever size you want to set it to)
    height: (ditto)
    position:relative;
    background:url('mainImage.jpg');
    z-index:5;
}

div::before {
    content:'';
    width: .... (same as main div)
    height: .... (same as main div)
    position:absolute;
    z-index:-3;
    display:block;
    opacity:0.5;
    background: linear-gradient(to bottom, #8fc400 0%,#ff0000 100%); /* plus add the other browser-specific gradient styles too */
}

I've done a jsFiddle for you to demonstrate: see here

Hope that helps.

[EDIT] Changed the details of the answer above slightly in response to OP's comment. Now using :before rather than :after, and using z-index to layer things so that the actual text content is visible on top of both backgrounds.