JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

<div class="parent">
    <div class="child">
        <h3>My Header</h3>
        <p><a href="another.html">A link</a></p>
        <p>Some content</p>
    </div>
    <img src="http://www.panthers.com/assets/images/imported/CAR/photos/clubimages/2016/05-May/tempRiverasOffice60--nfl_mezz_1280_1024.jpg" class="bg" />
</div>

CSS

/* Worst case (stretched img) */
.parent{
  position:relative;
  width: 100%;
  /*height: 145px;
  min-width:960px;*/
  float: left;
  clear: both;
}

.child{
  width: 960px;
  height: 80px;
  margin: 0 auto;
  text-align: center;
}

.bg {
    position:absolute;
    left:0px; top:0px;
    width:100%;
    height:100%;
    z-index:-1;
}


/* CSS Background Size (modernizr) */
html.backgroundsize .parent {
    background:url(https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcSJajtuH-6YcvAiQKTXGztCUA71D4pZkkYtu3kkC89tqsWPROzg) repeat-y left top;
    background-size:100% auto;
}
html.backgroundsize .bg {display:none;}


/* CSS Gradients (modernizr) */
html.cssgradients .parent {
  background-image:-webkit-gradient(linear, left center, right center, from(#FC0),to(#F90));
  background-image:-webkit-linear-gradient(left, #FC0, #F90);
  background-image:-moz-linear-gradient(left, #FC0, #F90);
  background-image:-o-linear-gradient(left, #FC0, #F90);
  background-image:-ms-linear-gradient(left, #FC0, #F90);
  background-image:linear-gradient(left, #FC0, #F90);
  background-size:auto;
}
html.cssgradients .bg {display:none;}