I’m building a parallax-like effect that causes images to move following the user’s mouse cursor, so I’ve purposely made my assets larger than the screen dimensions in order to prevent white background from showing up when they’re moved. However, for some reason, my images appear to be automatically shrunk to fit the screen size, such that when they’re moved they still create white space (see screenshot).

HTML:

<main>
    <div className="vignette" />
    <Image
        src="/Images/Layer 7.png"
        data-speedx="0.027"
        data-speedy="0.027"
        animation-direction="vertical"
        data-distance={-200}
        className="parallax layer7"
        alt="bg"
        width={2560}
        height={1440}
    />
...

CSS (global):

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

main {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.main::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

CSS (for this page):

.layer7 {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    animation: panDown 1s;
}

.layer6 {
    position: absolute;
    top: 70%;
    left: 50%;
    z-index: 2;
    animation: layer6FadeUp 2s;
}

.layer5 {
    position: absolute;
    top: 70%;
    left: 50%;
    z-index: 3;
    animation: fadeLeft 3.5s;
}

.layer4 {
    position: absolute;
    top: 70%;
    left: 50%;
    z-index: 4;
    animation: fadeRight 3.5s;
}
...

I’ve tried editing the CSS, tried using FILL instead of defining width/height in the tag, and tried converting to normal tags as well. None of the above solutions seemed to have worked. Any guidance is appreciated!