title: Background Image Mobile Responsive with Bootstrap
body: <p>I've tried Bootstrap's .img-responsive and other options but the background image on my mobile device is still blown up and pixelated. Mobile view on desktop browser is fine, but on actual mobile device, the image is skewed. Any help is appreciated.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="hero"&gt;
      &lt;div class="landing"&gt;
        &lt;div class="container"&gt;
          &lt;div class="wrapper"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col-md-8"&gt;
                &lt;img src="/website_v2/img/headline-work-play-contactics.png" class="shadow-offset img-responsive"&gt;                
              &lt;/div&gt; &lt;!-- /.col --&gt;
            &lt;/div&gt; &lt;!-- /.row --&gt;
          &lt;/div&gt; &lt;!-- /.wrapper --&gt;
        &lt;/div&gt; &lt;!-- /.container --&gt;
      &lt;/div&gt; &lt;!-- /.landing --&gt;
  &lt;/div&gt; &lt;!-- /.hero --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.hero .landing {
    position: absolute;
    left:0;
    width: 100%;
    min-height: 100%;
    background: url(../img/hero-index.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    border-bottom-style: solid;
    border-bottom-color: #d3d3d3;
    border-bottom-width: 1px;
    -webkit-animation: fadein 1s; /* Safari and Chrome */
      -moz-animation: fadein 1s; /* Firefox */
      -ms-animation: fadein 1s; /* Internet Explorer */
      -o-animation: fadein 1s; /* Opera */
      animation: fadein 1s;
  }
  
  .container {
    margin-right: auto;
    margin-left: auto;
    min-width: 100%;
  }
  
  .hero .container {
    max-width: 100%;
    padding-top: 100px;
  }
  
  .hero .wrapper {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    -webkit-animation: aniload .5s;
      -moz-animation: aniload .5s;
      -ms-animation: aniload .5s;
      -o-animation: aniload .5s;
      animation: aniload .5s;
  }
  
  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
  </code></pre>
  
  <p>Gracias!</p>