title: How to resize partial image to always fit screen by using background sprite
body: <p>I have a large image file (3838x1049) generated from a dual screen screenshot and I need to create 2 HTML files with each file displaying one half of the image.</p>
  
  <p>I was able to achieve that by using the background sprites and specifying the portion of the image I want to see. </p>
  
  <p>The problem is that the image is displayed in its original size which is larger than a typical monitor resolution. I need it to resize automatically to fit the screen while preserving the aspect ratio.</p>
  
  <p>Can anyone help ?</p>
  
  <p>Here is my current code for displaying the right portion of the image:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  img.home {
            width: 1899px;
            height: 1020px;
            background: url(dashboard.jpg) -1930px -1px;
           }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;img class="home" src="img_trans.gif"&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>