A Pen by Noah.

background-color-overlay-background-image.markdown

background-color overlay background-image

A Pen by Noah on CodePen.

License.

index.html

<div class="footer footer--img"></div>

style.scss

.footer {
  width: 100%;
  height: 500px;
}

.footer--img {
  background: -webkit-linear-gradient(rgba(blue, 0.5), rgba(blue, 0.5)), url(//farm6.staticflickr.com/5507/9687711282_8d2949218a_b.jpg);
  background: -moz-linear-gradient(rgba(blue, 0.5), rgba(blue, 0.5)), url(//farm6.staticflickr.com/5507/9687711282_8d2949218a_b.jpg);
  background: -o-linear-gradient(rgba(blue, 0.5), rgba(blue, 0.5)), url(//farm6.staticflickr.com/5507/9687711282_8d2949218a_b.jpg);
  background: linear-gradient(rgba(blue, 0.5), rgba(blue, 0.5)), url(//farm6.staticflickr.com/5507/9687711282_8d2949218a_b.jpg);
  
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  
  background-repeat: no-repeat;
  background-position: center center;
}