JSFiddle - React, Tailwind, and code Playground

by KheKhe

HTML

<div class="background-pic">
    
    <div class="top-blur">
        <div class="upper"></div>
        <div class="lower"></div>
    </div>
    
</div>

CSS

.background-pic {
    background-image:url(http://khongthe.com/wallpapers/nature/beautiful-valley-45851.jpg);
    background-size:cover;
    position:fixed;
    z-index:-1;
    height:400px;
    width:400px;
}

.top-blur {
    height:400px;
    width:400px;
    overflow: auto;
}

.upper {
    height:300px;
    width:100%;
    background-color: rgba(255, 127, 80, 0.5);
}

.lower {
    height:200px;
    width:100%;
    background-color: rgba(0, 255, 255, 0.51);
}