IE doesn't render background image

Question

I have a banner on the top of a webpage, using the background css tag on a header element.

HTML:

<section class="page-wrapper">
    <header class="block"></header>
    <div class="container"></div>
    <footer></footer>
</section>

CSS:

.page-wrapper > header {
  background: url('/path/to/image.jpg') no-repeat;
  background-size: cover;
  width: 100%;
  height: 450px;
}

And another CSS rule used for sticky footer. Not sure if it's relevant, but i'll add it here, just in case:

.block {
  display: table-row;
}

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.

I have tried changing the name of the image, to rule out any caching issues.

Tried it on three seperate computers in both IE 11 and 10.

Can't seem to post the screenshots I have as embedded, need at least 10 reputation. So I'll link to imgur instead.

Working: https://i.stack.imgur.com/NOFhb.jpg

Problem: https://i.stack.imgur.com/NEIMt.jpg

Anyone experienced something like this?

Edit: added the live site URL in the comments. Can't add more links in the original post.

Answer 1

As Paulie_D mentions, it seems display:table-row is the sinner. Tried removing it, and that seemed to fix it. I didn't try it earlier since I was conviced it was needed in the sticky footer solution. However the sticky footer is still working even after removing the table-row tag. Thanks for all your help and input.