From what I was able to look up and experiment with, there is no way to have them individually set to cover.
I do however, have a work around!
body {
width: 100%;
height: 100vh;
margin: 0px;
}
#back1,#back2,#back3{
background-size: 100% 100%;
background-position: center;
background-size: cover;
width: calc(100%/3);
height: 100vh;
position: absolute;
z-index: -1;
}
#back1{background-image: url(https://images.pexels.com/photos/1546166/pexels-photo-1546166.jpeg);}
#back2{background-image: url(https://images.pexels.com/photos/87223/pexels-photo-87223.jpeg);left:calc(100%/3);}
#back3{background-image: url(https://images.pexels.com/photos/280221/pexels-photo-280221.jpeg);left:calc(200%/3);}
h1{margin-top: 0px;}
<body>
<div id="back1"></div>
<div id="back2"></div>
<div id="back3"></div>
<h1>This text will start at the top left like it would otherwise.</h1>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
