title: Full Screen Background Image Is Stretched
body: <p>I had made a full screen background image for one of my clients, but the problem is that when I make the image to fit all the screen using the following css codes: </p>
  
  <pre><code>#bg-image img{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  max-height: 100%;
  }
  #bg-image{
  height: 100%;
  width: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  }
  </code></pre>
  
  <p>Everything works perfect, as the image is filling all the background of my home page, but the problem is that now the background image seems to be stretched, and I would like to know how to make my image is size or ratio to be correct in order to fit the whole screen size without getting stretched (with full quality), so that the background image is quality to be perfect.</p>
  
  <p>So, how to make my image to fit perfectly on the background of my home page. </p>
  
  <p>Any Help Would Be Very much Appreciated! </p>