title: How to use a responsive background image that centers differently in both portrait & landscape?
body: <p>I am trying to create a responsive background image which fills the entire page. I followed the CSS from <a href="https://stackoverflow.com/questions/12599234/why-does-css-background-size-cover-not-work-in-portrait-mode-on-ios">this</a> question which worked fine for me. </p>
  
  <pre><code>  background: url(captiveportal-back.jpg) no-repeat center center fixed;
        -webkit-background-size: 100%;
            -moz-background-size: 100%;
                -o-background-size: 100%;
                    background-size: 100%;
                        -webkit-background-size: cover;
                            -moz-background-size: cover;
                                -o-background-size: cover;
                                    background-size: cover;
  }
  </code></pre>
  
  <p>However I would like to center the image differently in portrait mode (so as to bring a different section of image in to focus). </p>
  
  <p>The bing website does this all the time, every time centering at different pixel as per the background image. How can it be done?</p>