JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="cta">
        <div class="cta-content">
            <div class="container">
                <h2>this is header</h2>
                <p>this is some other text.</p>
            </div>
        </div>
        <div class="overlay"></div>
    </section>

CSS

section.cta, section.cta2, section.cta3, section.cta4 {
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  padding: 250px 0;
}
section.cta .cta-content, section.cta2 .cta2-content, section.cta3 .cta3-content,  section.cta4 .cta4-content {
  position: relative;
  z-index: 1;
}
section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
  margin-top: 0;
  margin-bottom: 25px;
  color: black;
  max-width: 450px;
  font-size: 50px;
}

section.cta .cta-content p  {
  color: black;
  max-width: 450px;
  font-size: 20px;
}

section.cta {
  background-image: url('https://cdn1.tnwcdn.com/files/2011/08/bliss.jpg');
}

@media (min-width: 768px) {
  section.cta .cta-content h2, section.cta2 .cta2-content h2, section.cta3 .cta3-content h2, section.cta4 .cta4-content h2 {
    font-size: 80px;
  }
}
section.cta .overlay {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}