I'm trying to create a moving background effect on a slider with a background image. The background image changes position as the slider transitions between slides, creating a dynamic visual experience.
Here's an example of how I implemented this:
.carousel {
background-repeat: no-repeat;
transition: background 1.5s ease-in;
background: url('./slider_bg');
background-attachment: fixed;
}
.carousel.bg0 {
background-position: 0%;
}
.carousel.bg1 {
background-position: 50%;
}
.carousel.bg2 {
background-position: 100%;
}
This approach works well, but I ran into an issue when the screen size exceeds the dimensions of the background image (in this case, 1920 pixels in width). This results in unwanted repetition. I attempted to solve this by using background-size: cover;, which eliminates the repetition problem, but unfortunately, it also removes the moving background effect.
Do you have any suggestions or insights to help me maintain both the moving background effect and prevent image repetition?
EDIT:
To provide more context, when using the code above with an image size of 1920x1080 pixels and a screen resolution of 1366 x 768 pixels, there appears to be no movement in the image as the class changes with each new background position. However, if I adjust the screen height or decrease the width, the movement becomes noticeable. Any thoughts on why this might be happening?