title: How to make a background fill the screen, but stay centered in a responsive design
body: <p>I have a website. It is a single page website and the landing page has a bit of text along with a big background image. It looks like this:</p>
  <p><img src="https://i.stack.imgur.com/D7lQd.jpg" alt="enter image description here" /></p>
  <p>It all works perfectly and this is the code that I used for it.</p>
  <p>index:</p>
  <pre><code>&lt;div class=&quot;banner&quot; id=&quot;header&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-md-4 col-md-offset-4 text-center&quot;&gt;
                  &lt;div class=&quot;center-block&quot;&gt;
                      &lt;h1 class=&quot;landing-head&quot;&gt;Welcome&lt;/h1&gt;
                      &lt;/br &gt;
                      &lt;p class=&quot;landing-text&quot;&gt;A portfolio&lt;/p&gt;
                      &lt;/br &gt;
                      &lt;a class=&quot;nostyle-link&quot; data-scroll=&quot;&quot; href=&quot;#about&quot;&gt;
                          &lt;div id=&quot;go-button&quot;&gt;
                              &lt;p&gt;Discover&lt;/p&gt;
                          &lt;/div&gt;
                      &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>html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  }
  
  
  /*------ background and divider styles ------*/
  .banner {
      height:100%;
      width: 100%
      -webkit-background-size:cover;
      -moz-background-size:cover;
      -o-background-size:cover;
      background-size:cover;
      background-position: top left, center center;
      background-repeat: repeat, no-repeat;
      z-index: -1;
  }
  
  .content {
      height: 60% !important;
      background-color: white;
  }
  
  #header {
      background-image: url(&quot;../images/background1_2_2.jpg&quot;);
  }
  
  #divider {
      background-image: url(&quot;../images/divider.jpg&quot;);
  }
  </code></pre>
  <p>Now the problem is that when I run it in responsive mode, the background image does not scale or center, it just stays the same resulting in this:</p>
  <p><img src="https://i.stack.imgur.com/3ywV1.jpg" alt="enter image description here" /></p>
  <p>As you can see the image is not centered, but the view window is just moved over it rather. Can I solve this?</p>