title: IE: Background Image does not display. Browser repaints on hover?
body: <p>So this is one of the strangest IE bugs I have come across, and it's happening in IE11!</p>
  
  <p>I have a simple element that looks as follows:</p>
  
  <pre><code>&lt;div class="article"&gt;
      &lt;div class="wrapper"&gt;
          &lt;header&gt;&lt;h1&gt;Hello World&lt;/h1&gt;&lt;/header&gt;
          &lt;div class="image" style='background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/41/Left_side_of_Flying_Pigeon.jpg");'&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with the following CSS:</p>
  
  <pre><code>*{margin:0;padding:0;}
  
  .article {
      height:200px;
      background:aliceblue;
  }
  
  .wrapper {
      height:100%;
      display:table;
      width:100%;
  }
  
  header, .image {
   display:table-row;
      width:100%;
  }
  
  header {
      background:red;
      height:10px;
  }
  
  .article:hover .image {
      opacity:0.5;
  }
  </code></pre>
  
  <p>For a JSFiddle <a href="http://jsfiddle.net/DanielApt/ts8ahznd/" rel="nofollow noreferrer">click here</a> (you might need to click <em>Run</em> to see the bug appear)</p>
  
  <p>The issue is that when starting the page we do not see the background-image. When you hover over <code>.article</code> then the image suddenly appears! When hovering out the image remains (as expected).</p>
  
  <p>It is as if the browser only repaints the background-image when the user hovers?</p>
  
  <p><img src="https://i.stack.imgur.com/pdzyy.png" alt="The image does not display on initial page load"></p>
  
  <p><em>The image does not display on initial page load</em></p>
  
  <p><img src="https://i.stack.imgur.com/GGq4D.png" alt="The image displays on a mouse hover, the image will remain afterwards."></p>
  
  <p><em>The image displays on a mouse hover, the image will remain afterwards</em></p>
  
  <p>How can we display the background-image by default?</p>
  
  <p><strong>Fiddle > <a href="http://jsfiddle.net/ykrbe4zy/" rel="nofollow noreferrer">http://jsfiddle.net/ykrbe4zy/</a></strong></p>