JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container-fluid">
    <div class="row" >
        <div class="col-sm-12" id="top-banner"></div>
    </div>
    <div class="row">
        <div class="col-sm-12 text-center band-name-container" >
            <h1 class="band-name">LOREM IPSUM</h1>
        </div>
    </div>
</div>

CSS

#top-banner{
    background-image: url(http://placehold.it/350x150);
    background-attachment:fixed;
    height:300px;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.band-name-container{
    background-color:#222;
    height:150px;
}
.band-name{
    color:white;
    font-family: 'Lato','Trebuchet MS',sans-serif;
    font-size: 96px;
    margin:0;
    padding-top:20px;
}

@media (min-width: 500px) and (max-width: 800px) {
 #top-banner{
    height: 200px;   }

}

@media (min-width: 375px) and (max-width: 499px) {
 #top-banner{
    height: 150px;   }

}

@media (min-width: 250px) and (max-width: 374px) {
 #top-banner{
    height: 100px;   }

}

@media (min-width: 50px) and (max-width: 249px) {
 #top-banner{
    height: 50px;   }

}