Vintage Film Effect – CSS Linear RGBA Gradient Background Image Overlay

In this post we will be looking at the CSS background property and how to implement it into your projects to simulate a film photograph. Using the background property in our CSS allows us to set all the background properties in one declaration. We have the ability to set background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, linear-gradient, and background-attachment all from one declaration.

The background:linear-gradient property allows us to set an opaque linear gradient over our image using RBGA values [rgba(0, 0, 250, 0.25)]. In order to achieve this effect we must use RBGA values otherwise our gradient values will be at 100% strength.

To use linear gradients on our background image we must first declare the ‘background’ shorthand property. Next we must add our ‘linear-gradient’property followed by our RGBA values. The first three RGBA values specify your desired color and the last value specifies the desired opacity. Two RBGA values must be used for our linear gradient.

.img{
background:linear-gradient(rbga(0,0,250,0.25), rbga(250,0,0,0.45)),
url(http://www.imgsource.com/img);
}

Edited:

WATER.

Original:

HTML:

<div class="background-img">
  <div class="background-img-text">
    <h1>MEOW.</h1>
  </div>
</div>

CSS:

.background-img{
    background:linear-gradient(
     rgba(0, 250, 250, 0.25), 
     rgba(250, 153, 0, 0.25)),
     url(https://source.unsplash.com/1000x400/?water);
     height:370px;
     width:1000px;
     background-repeat: no-repeat;
     position: relative;
     display: block;
     background-position: center;
}
.background-img-text h1{
     width: 1000px;
     height: 370px; 
     text-align: center;
     vertical-align:middle;
     line-height:340px;
     display: inline-table;
     color:white;
     font-size:50px;
     font-weight:100;
}
.background-img-text h1:hover{
     color:#eee;
     font-weight:800;
     font-size:55px;
     background-color: rgba(0,0,0,0.4);
     -webkit-transition: opacity 0.6s;
     -moz-transition: opacity 0.6s;
     transition: opacity 0.6s;
     vertical-align:middle;
     line-height:370px;
     margin-top:0px;
}
2