I am facing an issue where I have an image that I want to display completely as a background image. https://i.sstatic.net/A8W71.jpg
In the picture below, you can see that the girl and the dog are not fully visible:
original image https://i.sstatic.net/EyHg5.jpg
Is there a CSS property that can help me display the image entirely as the background, or do I need to resize the image?
Below is my CSS code:
*{
margin: 0;
padding: 0;
}
body{
background-image: url('../public/images/bg0.jpg');
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
object-fit: contain;
transition: background-image 1.5s linear;
}
#__next{
height: 100%;
}