title: BootStrap Responsive Background image with text on it is not working
body: <p>I'm getting started with BootStrap 3 and trying to use a background image with text on it. At same time I want it to be reponsive but it seems there is some issue with the way I implemented it. I'm able to get it work for normal desktop but when I try to emulate on a mobile device, text goes outside of background image.</p>
  
  <p><a href="http://jsfiddle.net/cn5guyt4/2/" rel="nofollow">http://jsfiddle.net/cn5guyt4/2/</a></p>
  
  <pre><code>&lt;div id="front-landing"&gt;
     &lt;div class="container jumbotron hero-unit"&gt;
         &lt;h2 class="h1"&gt;&lt;span&gt;"Sample Test"&lt;/span&gt;&lt;/h2&gt;
         &lt;h3 class="-sub-title"&gt;
            &lt;span&gt;"Sample Test text 2"&lt;/span&gt;
         &lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .hero-unit {
    position: relative;
    margin-bottom: 0;
    margin-top: 15px;
    background: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg') 50% 80% no-repeat;
    background-size: 100%;
    min-height: 700px;
  }
  
  .h1 {
    font-size: 2.625em;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 0.571em;
    margin-top: 2em;
    text-align: center;
  }
  
  .-sub-title {
    font-weight: 400;
    text-align: center;
  }
  
  h2 span { 
      background-color: white; 
  }
  
  h3 span { 
      background-color: white; 
  }
  </code></pre>
  
  <p>Can someone help me to figure out what am I doing wrong here ?</p>
  
  <p>Thanks</p>