Overlay a Background-Image with an Rgba Background-Color

.background{  width: 500px;  height: 500px;  background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');  background-size: cover;}
.overlay{  width: 500px;  height: 500px;  background-color: rgba(0, 0, 0, 0.5);}

<div class="background">  <div class="overlay">    <!-- Content here -->  </div></div>

Overlay a background-image with an rgba color, with a CSS3 transition

Yes, it is possible.

demo

.boo {
  position: relative;
  width: 20em; min-height: 10em;
  background: rgba(0,0,0,0) url(http://placekitten.com/320/160);
  transition: background-color 1s;
}
.boo:hover {
  background-color: rgba(0,0,0,.5);
}
.boo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

What am I doing here?

What I am doing here is that I am setting a RGBa background-color on the div, behind its background-image and transitioning this background-color (its alpha) on :hover. All this happens behind the background-image. However, I am also using background-color: inherit on the pseudo-element, which means that, at any given moment, the pseudo-element, which is situated above its parent div (and therefore above the background-image of the div) is going to have the same background-color (meaning that the background-color of the pseudo-element is going to transition from rgba(0,0,0,0) to rgba(0,0,0,.5) on :hover).

Why do it this way?

The reason why I am not transitioning directly the background-color of the pseudo-element is that support for transitions on pseudo-elements is still not that good yet.

Support for transitions on pseudo-elements

✓ Firefox supports transitions on pseudo-elements and has supported them for quite a while, let's get this out of the way first.

✗ Current versions of Safari and Opera don't support transitions on pseudo-elements.

Chrome supports transitions on pseudo-elements only starting from version 26.

IE10 supports them in a bit of a weird way, meaning that something like:

.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }

won't work, you have to specify the hover state on the element itself as well. Like this:

.boo:hover {}
.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }

More info and examples about how you can transition various properties of pseudo-elements using this inherit technique: http://vimeo.com/51897358

EDIT

Transitions directly on pseudo-elements are now supported in Opera since the switch to Blink and in Safari since 6.1.

background image along with background color problem

Well you can use a background-image and a background-color at the same time. As soon as the background-image is loaded, it will be rendered above the background color. What youc an do, is to place a pseudo-div spanning the entire width and height and use a background-color on this pesudo-div. Be sure to sue a rgba value as otherwise the background will be non-transpaerent and hide the background-image.

However, ther content will be influenced at the same time, so the content has to be pushed to the front (layer-wise) with the use of z-index (e.g..content { z-index: 1; }).

To span the layer with the background-color the entire width, I gave the parent the attribute: position: relative;.
Next I used for the layer position: absolute;. I gave it a top: 0; bottom: 0; left: 0; right: 0; so it will be spanned the entire parents space.

.background {
  width:100%;
  min-height: 500px;
  background: url(https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60), #651fff;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.layer {
  background-color: rgba(255, 0, 0, 0.6);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.content {
  z-index: 1;
}

<div class="background">
  <div class="layer"></div>
  <div class="content">1</div>
</div>

body {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="background">
    <div class="layer">
    </div>
</div>