title: Horizontally stretching a div background image
body: <p>I know similar questions have been asked on this but I haven't managed to take any advice from those and get something working. A lot of advice on this topic is also geared towards making full-page background images, which isn't what i'm trying to do.</p>
  
  <p>I am trying to get a background image to stretch horizontally to fit a specific div. The div itself containts child divs with content which should be displayed over the top of the background.</p>
  
  <p>I have html like the following:</p>
  
  <pre><code>&lt;div class="parent"&gt;
  
      &lt;div class="child"&gt;
  
          &lt;h3&gt;My Header&lt;/h3&gt;
  
          &lt;p&gt;&lt;a href="another.html"&gt;A link&lt;/a&gt;&lt;/p&gt;
  
          &lt;p&gt;Some content&lt;/p&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and css like this:</p>
  
  <pre><code>.parent{
    width: 100%;
    height: 145px;
    float: left;
    clear: both;
    background: url(../img/parent-bg.png) top left no-repeat;
  }
  
  .child{
    width: 960px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
  }
  </code></pre>
  
  <p>parent-bg.png has a gradient fill left to right and is 60 x 142 pixels, which is why I want it to stretch to fit the parent div rather than just use repeat-x (the gradient looks odd when repeated).</p>
  
  <p>The CSS3 background-size:cover property does exactly what I want, but of course doesn't work  in IE for versions older than 9. I was curious to see if I could find a solution that works in IE 8 and 7.</p>
  
  <p>I had a look at quick play with this jquery plugin but couldn't get it working: <a href="https://github.com/louisremi/jquery.backgroundSize.js#readme" rel="nofollow">https://github.com/louisremi/jquery.backgroundSize.js#readme</a>. I'm not too keen on burying a style property in javascript anyway, which it was only a 'quick play'.</p>