title: Background image stretch full screen inside container
body: <p>I am trying to have a background image stretch to full width. Here is my markup</p>
  
  <pre><code>  &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="text-center"&gt;
          &lt;h3&gt;&lt;a href="#" class="logo" &gt;The Sound &lt;span class="fa fa-volume-off" style="color:#EF4836;"&gt;&lt;/span&gt;linic&lt;/a&gt;&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="vspace2"&gt;&lt;/div&gt;
        &lt;nav class="navbar text-center" role="navigation"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span style="color:#555;" class="fa fa-bars fa-2x"&gt;&lt;/span&gt;
            &lt;/button&gt;
         &lt;/div&gt;
  
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li&gt;&lt;a class="fattify" href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="fattify" href="#"&gt;Studio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="fattify" href="#"&gt;Team&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="fattify" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
      &lt;/nav&gt;
  
      &lt;div class="first-main"&gt;
        &lt;div class="text-center"&gt;
          Whatever I write here
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>I am using bootstrap. The background image inside the <code>first-main</code> class does not stretch to full screen width. How can I do that ?</p>
  
  <p>Here is the extra css part:</p>
  
  <pre><code>.first-main{
      border-top: 5px solid #555;
      background : url('../../studio-1.jpg') no-repeat;
      background-size :100% auto;
      width : 100% ;
      height: 800px;
  }
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p><a href="http://jsfiddle.net/8t1gg3g1/" rel="nofollow">Fiddle</a></p>