Check out the issue showcased in JSfiddle:
https://jsfiddle.net/qjtbchpu/11/
<div id="container">
<article>
content here
</article>
<article>
more content here
</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 code snippet works flawlessly on all major browsers except for IE11. In IE11, the image only displays with position:absolute, which does not give me the desired effect.
Does anyone have any solutions or workarounds for this? Thank you