I've been struggling to prevent the image from overflowing and expanding my webpage. I attempted using overflow:hidden in various places, but it hasn't solved the issue.
To avoid the text from zooming as well, I included a ::after element.
.mainScreen {
display: flex;
color: white;
height: 90vh;
z-index: 2;
}
.mainScreen::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 90vh;
background-image: url('https://images.pexels.com/photos/9707969/pexels-photo-9707969.jpeg?auto=compress&cs=tinysrgb&w=600');
background-size: cover;
z-index: 1;
animation: zoom-in-zoom-out 30s ease infinite;
}
@keyframes zoom-in-zoom-out {
/*This is the animation zoom-in-zoom-out effect*/
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.1, 1.1);
}
100% {
transform: scale(1, 1);
}
}<div class="mainScreen">
</div>