title: IE doesn't render background image
body: <p>I have a banner on the top of a webpage, using the background css tag on a header element.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="page-wrapper"&gt;
      &lt;header class="block"&gt;&lt;/header&gt;
      &lt;div class="container"&gt;&lt;/div&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.page-wrapper &gt; header {
    background: url('/path/to/image.jpg') no-repeat;
    background-size: cover;
    width: 100%;
    height: 450px;
  }
  </code></pre>
  
  <p>And another CSS rule used for sticky footer. Not sure if it's relevant, but i'll add it here, just in case:</p>
  
  <pre><code>.block {
    display: table-row;
  }
  </code></pre>
  
  <p>This works just fine in Chrome and Firefox. But in Internet Explorer 11 and 10, it sometimes fails to render. But when I hover the cursor over a menu item, it renders under that element only. When I say 'sometimes', I mean I can hammer the F5 key 30 times, and it sometimes it renderes, and sometimes it doesn't. It appears to me to be random.</p>
  
  <p>I have tried changing the name of the image, to rule out any caching issues. </p>
  
  <p>Tried it on three seperate computers in both IE 11 and 10.</p>
  
  <p>Can't seem to post the screenshots I have as embedded, need at least 10 reputation. So I'll link to imgur instead.</p>
  
  <p>Working: <a href="http://imgur.com/COhiKgx" rel="nofollow">http://imgur.com/COhiKgx</a></p>
  
  <p>Problem: <a href="http://imgur.com/PMjfzUx" rel="nofollow">http://imgur.com/PMjfzUx</a></p>
  
  <p>Anyone experienced something like this?</p>
  
  <p>Edit: added the live site URL in the comments. Can't add more links in the original post.</p>