background image overlay color css

Background image overlay 

html

<h1> background image overlay </h1>

<div class="images overlay">

  <h1> background images overlay background-color </h1>

</div>

CSS

.overlay:before{

  position: absolute;

  content:" ";

  top:0;

  left:0;

  width:100%;

  height:100%;

  display: block;

  z-index:0;

  background-color:rgba(0,153,255,0.5);

}

.images {

width:300px;

  height:300px;

  display: inline-block;  

  position: relative;

  color:#fff;

   background-image: url(images-name.jpg);

 background-size: cover;

}

.images * {

    position: relative;    

}

Preview

Css trick

direction  property

Css

. mainConten{direction :rtl;} 

Value 

1.ltr =left to right now 

2.rtl=right to left 

3.inherit=inherit its value the parent element