Creating a simple slideshow for the background using CSS has been successful, but I am facing an issue with making all backgrounds utilize background-size: cover. I want the images to fit properly on the screen.
Another problem is that the pictures take around 2 seconds to load when the website is first opened, resulting in a white screen before the images appear.
Additionally, I would like to ensure that the website is responsive by adjusting the size of the background pictures based on the screen size. However, figuring out the correct approach without affecting the keyframes poses a challenge for me.
I have made progress on setting different percentages for each picture, aiming to extend their display time while maintaining quicker rotation animation. Below is the code snippet where this implementation can be seen:
body {
background-size: cover;
animation: div 25s infinite;
height: 100vh;
margin: 0;
}
@keyframes div {
0% {background-image: url("4.jpg"); opacity: 1;}
15% {background-image: url("4.jpg"); opacity: 1;}
25% {background-image: url("3.jpg"); opacity: 1;}
35% {background-image: url("3.jpg"); opacity: 1;}
45% {background-image: url("1.jpg"); opacity: 1;}
55% {background-image: url("1.jpg"); opacity: 1;}
65% {background-image: url("5.jpg"); opacity: 1;}
75% {background-image: url("5.jpg"); opacity: 1;}
85% {background-image: url("4.jpg"); opacity: 1;}
100% {background-image: url("4.jpg"); opacity: 1;}
}
The link to the website showcasing this background slideshow can be accessed here: