css background image is not displaying bottom of the image-CodePudding

I have a css background image that i displayed as cover so that it covers entire screen but it does not show lower part of the image.

used this image: https://pixabay.com/vectors/winter-landscape-houses-background-2840549/

unable to see the lower part of the white houses in the screen.

using chrome browser.

CSS Code:

banner{
    width: 100%;
    height: 100vh;
    background-image: url(./images/winter.png);
    background-size: cover; 
    background-repeat:
    position: relative;
    text-align: center;
    background-attachment: fixed;
}

any help appreciated

CodePudding user response：

body{
    background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
    
    /* Center and scale the image nicely */
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

CodePudding user response：

Try changing background-size: cover; to background-size: contain; and then background-size: 100% 100%; to fit 100% width.

body {
    background-image: url(https://cdn.pixabay.com/photo/2017/10/11/10/05/winter-2840549_960_720.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: fixed;
    background-size: 100% 100%;
}

CodePudding user response：

The problem you are having that the height of your image is bigger than the hight of the container (body element) at certain point depeding on the current viewport height, which causes your image to be cropped.

You can try the background-size: contain where the image will scale and try to fit the container keeping the aspect ratio undisturbed. Here you gurantee that your image will not be cropped, but you need to consider changing the image for each device screen size (responsive design image).

There are many ways to solve this issue, but you need to find the one that fits your design, or to find the image that fits your container.

Check this w3schools article about responsive design image