title: Bootstrap 3 : Changing Jumbotron height causes background image not to be centred on resizing
body: <p>I have a jumbotron </p>
  
  <pre><code>&lt;div class="jumbotron" id="intro"&gt;
        &lt;div class="container"&gt;
          &lt;h1&gt;Hello, world!&lt;/h1&gt;
          &lt;p&gt;...&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-primary btn-lg" href="#" role="button"&gt;Learn more&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with the following css</p>
  
  <pre><code>#intro
  {
      background: url('../images/bg.jpg') no-repeat center center;
      background-size:cover;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  .jumbotron
  {
      min-height: 400px;
  }
  </code></pre>
  
  <p>But when I resize the window, the image is not resized and centred. However, if I remove </p>
  
  <pre><code>.jumbotron
      {
          min-height: 400px;
      }
  </code></pre>
  
  <p>image is resized and centred properly.</p>