JSFiddle - React, Tailwind, and code Playground

by Pamela Cook

HTML

<script src="https://s3.amazonaws.com/nbcbigbend/HeaderWeb-2000px.jpg"></script>
<script src="https://s3.amazonaws.com/nbcbigbend/HeaderWeb.jpg"></script>
<script src="https://s3.amazonaws.com/nbcbigbend/HeaderWeb-768px.jpg"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="intro">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <h1>New Beginnings Church<br>of the Big Bend</h1> Continue to the Website Watch our latest teaching
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

$textColorDarkBack: #ffffff;
$textColorWhiteBack: #000000;
body,
html,
.container-fluid {
  width: 100% !important;
  height: 100% !important;
}

body,
html {
  font-size: 12px;
  font-family: Arial;
  color: $textColorWhiteBack;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  -ms-font-smoothing: antialiased !important;
  font-smoothing: antialiased !important;
}

/* Intro Section */

#intro {
  display: table;
  width: 100%;
  height: auto;
  padding-bottom: 50px;
  text-align: center;
  color: $textColorDarkBack;
  background-color: #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
}

@media screen and (max-width: 767px) {
    height: 100%;
  #intro { background: url("https://s3.amazonaws.com/nbcbigbend/HeaderWeb-768px.jpg") no-repeat center center fixed; }
}

@media screen and (min-width: 768px) and (max-width: 2000px) {
  #intro { background: url("https://s3.amazonaws.com/nbcbigbend/HeaderWeb-2000px.jpg") no-repeat center center fixed; }
}

@media screen and (min-width: 2001px) {
  #intro { background: url("https://s3.amazonaws.com/nbcbigbend/HeaderWeb.jpg") no-repeat center center fixed; }
}

#intro .intro-body {
  display: table-cell;
  vertical-align: bottom;
}

#intro .intro-body h1 {
  font-size: 500%;
  font-weight: bold;
  color: $textColorDarkBack;
}

@media screen and (min-width: 768px) {
  body,
  html {
    font-size: 13px;
  }
  #intro {
    height: 100%;
    margin: 0;
  }
}