title: Image not fully responsive
body: <p>I am using Bootstrap and have an image 1920x1280. It is currently responsive only till about a width of 1000 px and stops shrinking from there. Width below 1000 px, it starts to cut off the side of the image. I need the full image to be visible on any device. I am adding the image via CSS background url. Is there a way around this. Added the relevant code below. The image is placed within the ID 'intro'.</p>
  
  <p>Image</p>
  
  <p><a href="https://i.stack.imgur.com/onE80.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/onE80.png" alt="enter image description here"></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="intro"&gt;
    &lt;div class="intro-body"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-10 col-md-offset-1"&gt;
            &lt;h1 style="color: #000000"&gt;Title&lt;span class="brand-heading"&gt;Quote&lt;/span&gt;&lt;/h1&gt;
            &lt;p style="color: #000000" class="intro-text"&gt;Short description&lt;/p&gt;
            &lt;a href="#about" class="btn btn-default page-scroll"&gt;Learn More&lt;/a&gt; &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>#intro {
      display: table;
      width: 100%;
      height: auto;
      padding: 100px 0;
      text-align: center;
      color: #fff;
      background: url(../img/intro-bg.jpg) no-repeat center center fixed;
      background-color: #000;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  #intro .intro-body {
      display: table-cell;
      vertical-align: middle;
  }
  #intro .intro-body H1 {
      font-size: 76px;
      font-weight: 700;
      color: rgba(255,255,255,0.8);
      text-transform: uppercase;
  }
  
  @media(min-width:768px) {
  #intro {
      height: 100%;
      padding: 0;
  }
  #intro .intro-body .intro-text {
      font-size: 18px;
      letter-spacing: 1px;
      margin-bottom: 100px;
      color: rgba(255,255,255,0.9);
  }
  }
  </code></pre>