JSFiddle - React, Tailwind, and code Playground

HTML

<section class="section-1">
    <div class="flex-container">
        <div class="row">
             <h1>Title words.</h1>

             <h2>Subtitle words here. Lots of them. Like a paragraph's worth.</h2>

        </div>
    </div>
</section>

CSS

html, body { height: 100%; }
.section-1 {
    background: url("http://img01.deviantart.net/cb2e/i/2011/323/0/3/background_05_1600x1200_by_frostbo-d42mpk5.png") no-repeat;
    background-attachment: scroll;
    background-size: contain;
    position: relative;
    color: #fff;
    height: 100%;
    margin: 0;
    padding: 0;
}
.flex-container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
    border: 1px solid red;
}

JavaScript

var img = new Image();
var elem = document.getElementsByClassName("section-1")[0];
img.src = window.getComputedStyle(elem, null).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");

function resize() {
    var bgHeight = elem.offsetWidth * img.height / img.width;
    elem.style.height = bgHeight + 'px';
}
window.onresize = resize;
resize();