Essentially, if a background image is placed within a scrolling div, it will no longer remain fixed and will revert back to scrolling:
CSS:
<div class="wrapper">
<span></span>
</div>
HTML:
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.wrapper{
width: 90%;
height: 1000px;
margin: 0 auto;
overflow: scroll;
}
span{
background-image: url(http://i.imgur.com/Q3NruNr.jpg);
height: 1500px;
width: 100%;
display: block;
margin: 0 auto;
background-attachment: fixed;
background-size: cover;
}
While this issue is present in Chrome, Firefox seems to handle it without any problems. Is there a workaround available?