JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div class="img with-bg"></div>

CSS

.bg {
}
.img {
    background: url('https://yandex.ru/images/today?size=1920x1080');
    width: 400px;
    height: 400px;
    position: relative;
}
.img.with-bg::before {
    content: '';    
    display: block;
    background-color: #00c0f7;
    background-repeat: repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.9;
}
.img.with-bg::after {
    content: '';        
    display: block;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAAAAADhZOFXAAAAMUlEQVR4AQXAwQmAMAADwAymitL9/9VCcJKTvKBbQPcZ6DEFPR9Cr4XovSDfWCCjoD/SYTeuAZE4IQAAAABJRU5ErkJggg==');
    background-repeat: repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.1;
}