title: How to make css background-image a fluid image work in IE
body: <p>I had this working in IE9, but then messed it up trying to figure it out in IE8 and 7. I've searched around here and other places, but can not find the correct solution to my problem.</p>
  
  <p>I'm trying to scale an image down in a div whenever the browser window is resized smaller than its max-width (fluid image). I'm assuming the problem is that I'm using a CSS3 property (background-size: 100%;) which is not supported in older browsers. How can I make this compatible to IE9, 8, 7?</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Fluid Image&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  img {
      max-width: 90%;
      height: auto;
  }
  
  .imageContainer {
      width: 900px;
      max-width: 90%;
      margin: 0 auto;
      background-image: url(img/fluidImage.jpg);
      background-position: 0 -450px;
      background-repeat: no-repeat;
      background-size: 100%;
      height: 650px;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="imageContainer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>