Multiple background images repeated - html

Question

What I am trying to achieve is having multiple images stacked vertically on a website, so that an image will fill the entire screen.
What I hope for
1920x1080
1000x1080
The magenta is the active screen region. However, I just can't seem to only scale the height of the image. Only the width is scaling. The solutions I have found, break the aspect ratio and crushes the quality of the images used. I would rather scale the image a bit, than break the aspect ratio, therefore the weird scaling in 1000x1080
HTML
<div id="home">
<div>
<h1 id="welcomeHeaderOverlay">HermansenDesigns</h1>
<hr>
<h3 id="welcomeSubHeaderOverlay">Where code happens</h3>
</div>
<img class="img-scale" src="https://picsum.photos/1920/1080/?random" alt="placeholder+image" >
</div>
I have a few of these stacked
CSS
.img-scale {
background-size: cover !important;
height:100%;
}
Result
The image scales with the proper aspect ratio, however, it makes it full-sized 1920x1080, instead of 100% of the active screen region. And makes it so there is a horizontal scrolling.
The outcome is something like this
1905x1080
500x1080
I have tried various methods, from bootstrap with img-fluid and containers to various tutorials on full-sized background images. I have achieved a solution that works for a 1920x1080* browser, however, it scales horribly.
Sorry for the newbie question.
Is it even possible in pure css, or do i need some js or jquery?

Answer 1

Maybe you are looking for something like this:
body {
margin:0;
}
div {
height:100vh;
background-size:cover;
background-position:center center;
}
<div style="background-image:url('https://picsum.photos/1920/1080/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1081/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1082/?random')"></div>

Answer 2

this is only achieved through css, so instead of having and tag you can just have a div tag without the src attribute.
and then in the CSS
HTML
<div class="scale-img"></div>
CSS
.scale-img {
/* Set height to some high amount so you can see your image doing as you want*/
height: 5000px;
background-image: url("path/to/your/image1920x1080");
/* background-size: 1920px 1080px; */
/*
EDIT: A better approach would be to use contain for responsiveness
*/
background-size: contain;
background-repeat: repeat;
}