JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headerBackground">

    <div id="headerContent"></div>

</div>

CSS

#headerBackground{
   width: 100%;
   height: 131px;
    background-color:#000000;
    
    /* The below is from an Online Graident Generator */
    /* This one was used: http://www.colorzilla.com/gradient-editor/         */
    background: rgb(125,126,125);
    background: -moz-linear-gradient(top,  rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1)));
    background: -webkit-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -o-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: -ms-linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    background: linear-gradient(top,  rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 );
 
    
}

#headerContent {
    background-image: url(http://lorempixel.com/500/131/sports);
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}