title: CSS background image disappears in IE (6, 7, 8) after running jQuery .cycle()
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div id="similar-products" class="box small"&gt;
   &lt;div class="product"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Lorem ipsum 1&lt;/a&gt;&lt;/h3&gt;
    &lt;p class="figure"&gt;&lt;img src="_img/thumb/blah.png" alt=""&gt;&lt;/p&gt;
    &lt;p class="price"&gt;€ 19,99&lt;/p&gt;
    &lt;p class="more-info"&gt;&lt;a href="#more-info"&gt;More info&lt;/a&gt;&lt;/p&gt;
    &lt;p class="add-to-cart"&gt;&lt;a href="#add"&gt;Add to shopping bag&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="product"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Lorem ipsum 2&lt;/a&gt;&lt;/h3&gt;
    &lt;p class="figure"&gt;&lt;img src="_img/thumb/blah.png" alt=""&gt;&lt;/p&gt;
    &lt;p class="price"&gt;€ 19,99&lt;/p&gt;
    &lt;p class="more-info"&gt;&lt;a href="#more-info"&gt;More info&lt;/a&gt;&lt;/p&gt;
    &lt;p class="add-to-cart"&gt;&lt;a href="#add"&gt;Add to shopping bag&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="product"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Lorem ipsum 3&lt;/a&gt;&lt;/h3&gt;
    &lt;p class="figure"&gt;&lt;img src="_img/thumb/blah.png" alt=""&gt;&lt;/p&gt;
    &lt;p class="price"&gt;€ 19,99&lt;/p&gt;
    &lt;p class="more-info"&gt;&lt;a href="#more-info"&gt;More info&lt;/a&gt;&lt;/p&gt;
    &lt;p class="add-to-cart"&gt;&lt;a href="#add"&gt;Add to shopping bag&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="product"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Lorem ipsum 4&lt;/a&gt;&lt;/h3&gt;
    &lt;p class="figure"&gt;&lt;img src="_img/thumb/blah.png" alt=""&gt;&lt;/p&gt;
    &lt;p class="price"&gt;€ 19,99&lt;/p&gt;
    &lt;p class="more-info"&gt;&lt;a href="#more-info"&gt;More info&lt;/a&gt;&lt;/p&gt;
    &lt;p class="add-to-cart"&gt;&lt;a href="#add"&gt;Add to shopping bag&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="product"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Lorem ipsum 5&lt;/a&gt;&lt;/h3&gt;
    &lt;p class="figure"&gt;&lt;img src="_img/thumb/blah.png" alt=""&gt;&lt;/p&gt;
    &lt;p class="price"&gt;€ 19,99&lt;/p&gt;
    &lt;p class="more-info"&gt;&lt;a href="#more-info"&gt;More info&lt;/a&gt;&lt;/p&gt;
    &lt;p class="add-to-cart"&gt;&lt;a href="#add"&gt;Add to shopping bag&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="product"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Lorem ipsum 6&lt;/a&gt;&lt;/h3&gt;
    &lt;p class="figure"&gt;&lt;img src="_img/thumb/blah.png" alt=""&gt;&lt;/p&gt;
    &lt;p class="price"&gt;€ 19,99&lt;/p&gt;
    &lt;p class="more-info"&gt;&lt;a href="#more-info"&gt;More info&lt;/a&gt;&lt;/p&gt;
    &lt;p class="add-to-cart"&gt;&lt;a href="#add"&gt;Add to shopping bag&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="product"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Lorem ipsum 7&lt;/a&gt;&lt;/h3&gt;
    &lt;p class="figure"&gt;&lt;img src="_img/thumb/blah.png" alt=""&gt;&lt;/p&gt;
    &lt;p class="price"&gt;€ 19,99&lt;/p&gt;
    &lt;p class="more-info"&gt;&lt;a href="#more-info"&gt;More info&lt;/a&gt;&lt;/p&gt;
    &lt;p class="add-to-cart"&gt;&lt;a href="#add"&gt;Add to shopping bag&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="product"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Lorem ipsum 8&lt;/a&gt;&lt;/h3&gt;
    &lt;p class="figure"&gt;&lt;img src="_img/thumb/blah.png" alt=""&gt;&lt;/p&gt;
    &lt;p class="price"&gt;€ 19,99&lt;/p&gt;
    &lt;p class="more-info"&gt;&lt;a href="#more-info"&gt;More info&lt;/a&gt;&lt;/p&gt;
    &lt;p class="add-to-cart"&gt;&lt;a href="#add"&gt;Add to shopping bag&lt;/a&gt;&lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to cycle through these products in groups of four. So I'm using the following JavaScript (jQuery):</p>
  
  <pre><code>// Wrap every four elements in a DIV
  var elems = $('#similar-products div');
  for (var i = 0; i &lt; elems.length; i += 4) {
   elems.slice(i, i + 4).wrapAll('&lt;div class="wrap"&gt;'); // split of four and wrap them in another DIV
  }
  
  $('#similar-products').after('&lt;p class="next"&gt;&lt;a href="#next"&gt;Next 4 suggestions&lt;/a&gt;&lt;/p&gt;');
  
  alert('Before this alert(), things look fine, even in IE!');
  
  // Invoke the jQuery Cycle plugin; this causes the CSS background image of #similar-products to disappear in IE
  $('#similar-products').cycle({ fx: 'scrollHorz', speed: 1000, timeout: 0, next: $('.next') });
  </code></pre>
  
  <p>As you can see, after invoking the Cycle plugin, the CSS background image of <code>#similar-products</code> disappears in IE.</p>
  
  <p>Things I already tried:</p>
  
  <ul>
  <li><code>#similar-products, #similar-products .wrap, #similar-products .wrap div { position: relative; }</code></li>
  <li>Setting <code>hasLayout</code> for IE: <code>#similar-products, #similar-products .wrap, #similar-products .wrap div { zoom: 1; hasLayout: true; }</code></li>
  </ul>
  
  <p>How can I stop the background image from disappearing in IE?</p>