Check out example codes for "make background overlay css". It will help you in understanding the concepts better.

Code Example 1

#element-with-background-image {
   position: relative;
   background-image: url("//spin.atomicobject.com/wp-content/uploads/20170324102432/portfolio-tips-feature-image.jpg");
}
 
#color-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: black;
   opacity: 0.6;
}

Code Example 2

<div id="element-with-background-image">
   <div id="color-overlay"></div>
   ...
</div>

Learn ReactJs, React Native from akashmittal.com