title: Minimum size of fullscreen background image when scaling browser
body: <p>I am currently trying to modify a wordpress theme that has a full screen image as the homepage. Right now it scales perfectly fine with the browser, the only problem is it doesn't go smaller then the original image size. It will go larger and keep its aspect ratio but when you size down the window it doesn't go smaller then the default image size.</p>
  
  <p>Here is the CSS in the theme for this part:</p>
  
  <pre><code>/* full screen slides */
  .slides.full {
    position: absolute;
    top: 0;
    left: 0;
    background: #373432;
    width: 100%;
    height: 100%;
    max-height: 100%;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  }
  
  .slides.full img {
    min-height: 100%;
    min-width: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
  }
  </code></pre>
  
  <p>I used another way that made the image go smaller then its original size but it didn't stick to the height of the browser there was just a grey background underneath.</p>
  
  <p>Is someone able to help me change the css I posted to do what I am trying to achieve? It would be much appreciated! Thanks.</p>