(Novice inquiry) Greetings, I am endeavoring to design a website featuring a single elongated image as the background that can be scrolled. Nothing too intricate, just an image measuring 1920x3740 pixels where only a portion equivalent to the viewport size is visible. To better illustrate my concept, I have included a visual reference here: https://i.sstatic.net/L9BtN.png
I experimented with stacking multiple divs vertically, each set at 1920x1080 dimensions, and attempted to slice the image accordingly so it fits properly. While this method yielded some success, the images didn't maintain a consistent 16x9 aspect ratio, causing misalignment at the edges. Currently, I have managed to create one large image but am unable to scroll through it.
Here's the HTML code snippet:
<div class="bgImageFull"></div>
Corresponding CSS styling:
.bgImageFull{
background-image: url(../images/LandingPage/NEW_TAHIN_IMAGE_FULL.jpg);
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
Prior settings are included below, although I suspect they may not address my current dilemma:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
html, body{
height: 100%;
font-family: 'functionPro';
}