One issue I'm encountering is that the background image randomly disappears when scrolling down, revealing the background color instead. To better illustrate, here's a gif demonstrating the problem: https://gyazo.com/d2d742a1ff1225babe04faa0a597ada9
<body>
<div class="background">
</div>
<div class="randomcontent">
<h1>Random Content</h1>
</div>
</body>
.background{
top:0;
background-image: url(background.jpg);
background-repeat:repeat-x;
background-attachment:fixed;
background-position: left top;
position:absolute;
overflow:auto;
z-index:-5;
min-width:100%;
height:100vh;
margin:0;
}
.randomcontent{
width:80%;
height:2000px;
right:0; left:0;
margin:auto;
border:solid 2px blue;
background:red;
text-align:center;
}
.randomcontent h1{
font-size:100px;
}