'Full image is not showing in the background

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

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

original image enter image description here

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%;
}
htmlcssnext.js


Solution 1:[1]

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;.

or

using background-position: bottom.

I hope this solve your problem.

Check this W3 out background-size background-image

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Supakorn Netsuwan
Solution 2 Marian

Related Questions