JSFiddle - React, Tailwind, and code Playground

by Nikolay Petrov

HTML

<div class="tinted-image"></div>

CSS

.tinted-image {
  
  width: 300px;
  height: 200px;
  
  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.7), 
      rgba(255, 0, 0, 0.7)
    ),
    /* bottom, image */
    url(https://msys.pro/c/portfolio/mhockey/_teaser.jpg);
    background-size:cover;
}