title: Make jumbotron background-image and text responsive
body: <p>I have a <code>jumbotron</code> that adjusts its banner image to the whole screen. </p>
  
  <p>When I tried to put text on top of the image, the text won't show up on mobile screens, because the image fits the mobile screen (it's becoming smaller in height). </p>
  
  <p><strong>How can I adjust both my image and text to fit on any screen?</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.widewrapper {
    width: 100%;
  }
  .widewrapper &gt; img {
    width: 100%;
  }
  .post-content {
    background: none repeat scroll 0 0;
    opacity: 0.5;
    top: 0;
    left: 0;
    position: absolute;
  }
  .thumbnail {
    position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Bootstrap CDN --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;!-- Original code --&gt;
  &lt;div class="widewrapper thumbnail"&gt;
    &lt;img class="" src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" alt=""&gt;
    &lt;div class="post-content"&gt;
      &lt;h2 class="text-white"&gt;ABOUT&lt;/h2&gt;
      &lt;h3 class="text-white"&gt;We invite you to enjoy a luxurious ground transportation service provided by our team of experts. We have the experience and skills to meet the expectations of every passenger and add value to every ride.&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>