title: Positioning image horizontally center and make height 100% of viewport
body: <p>I have a an image taking up the entire height of the viewport. The image height should span the entire viewport height (100%) so that it will fit to the screen it is viewed from (already accomplished here) and the width should be relatively proportional to the height. As you can see in my page (<a href="http://lamininbeauty.co.za" rel="nofollow">http://lamininbeauty.co.za</a>), the page has space on the sides. I want the image to center horizontally. Below is my code:</p>
  
  <p>CSS:</p>
  
  <pre><code>body{
      margin: 0px;
      padding: 0px;
      overflow: hidden;
  }
  
  #main{
      margin: auto;
  }
  
  img.bg {
          /* Set rules to fill background */
          max-height: 100%;
  
          /* Set up proportionate scaling */
          height: auto;
  
          /* Set up positioning */
          position: fixed;
  
  }
  </code></pre>
  
  <p></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="main"&gt;
      &lt;img class="bg" src="images/massage2.jpg" border="none" /&gt;  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Note: I do not want the image to lose aspect ratio and it should always fit in vertically 100%, none of the image being cut off and no vertical scrolling. Horizntal centering. I try to stay away from the background-size property since IE8 and lower does not support it.</p>