Full image is not showing in the background-CodePudding

I have a image which I want to completely show as background image .

As you can see in the below image , the girl & the dog is not completely shown:

original image

Is there any css property to completely so the image as the background ? or I have to resize the image ?

Here's my css:

*{
      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%;
}

CodePudding user response：

You are using background-size: cover; so the image will try to fit itself to the element. You may change properties to background-repeat:no-repeat; background-size:contain;.

using background-position: bottom.

I hope this solve your problem.

Check this W3 out background-size background-image

CodePudding user response：

Using "background-size: cover;" the browser will expand the background photo so it will cover the whole website body. You could use "background-size: contain;" to see the whole image, but it will not cover the whole website. The best solution is to resize the image.