title: While adding image make width as same as screen while height scrollable
body: <p>I have an image of 2000* 8000 pixels. I wanted to make the width as same as the loading window while the height must be scrollable. 
  I mean that after the page loads width:100% and height:25% must only be displayed of the image. Then when i scroll down the rest of the height must be displayed i.e. the image should only scroll downwards not sideways.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.img {
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
  }
  
  html {
    background: url(importantwebsite.jpg);
    background-size: 100%;
    /*-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;*/  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have used the above code but it displays 100% width and 25% height, And the rest of the image is not shown. Please help..!!</p>