CODEWITHSUNDEEP
cssinternet-explorercss-positionpseudo-element
Codemonkey
Codemonkey

Reputation: 4809

CSS background image doesn't show up on IE11 when on position:fixed pseudo-element

JSfiddle demonstrates the problem:

https://jsfiddle.net/qjtbchpu/11/

<div id="container">
  <article>
    blah
  </article>
  <article>
    blah
  </article>
</div>

#container::before {
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  content: '';
  background: url(https://imgur.com/qYUPJgv.jpg);
  position: fixed;
}

article {
  position: relative;
  height: 500px;
  background: rgba(255, 255, 255, .75);
  margin: 4em;
  padding: 2em;
  border: 1px solid black
}

This works perfectly in all major browsers that I've tried, apart from IE11 where the photo only appears if I use position:absolute which doesn't give me the effect I desire.

Any known solutions or workarounds? Thank you

Upvotes: 2

Views: 281

Answers (1)

skobaljic
skobaljic

Reputation: 9644

IE11 simply won't load huge images there, guess at the time of pseudo element creation, they are not in cache. Your code works just fine with some simple/small image, but for larger image (that takes time to load) you can use this trick:

#container::before {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    content: url(https://imgur.com/qYUPJgv.jpg);
    background: url(https://imgur.com/qYUPJgv.jpg);
    background-size: cover;
    text-indent: -9999px;
    overflow: hidden;
    position: fixed;
}
article {
    position: relative;
    height: 500px;
    background: rgba(255, 255, 255, .75);
    margin: 4em;
    padding: 2em;
    border: 1px solid black
}
<div id="container">
    <article>
        blah
    </article>
    <article>
        blah
    </article>
</div>

Tested and it works fine, also on JSFiddle.

Key line, which force browser to load the image is:

content: url(https://imgur.com/qYUPJgv.jpg);

Upvotes: 1

Related Questions