如何设置背景图片的高度

Question

I have an image.I wish to set it as background image.I want to it to cover the entire size so i used background-size:cover; .It covers the entire length but the image is clipped at the bottom.Can anyone help me to set the background-size:cover; also the image to its full length and height?

Answer 1

Css have min height .. you can use it when your background size is cover...

Css:

.bg{
    background: url('path/to/image.png');
    background-size: cover;
    min-height: 500px;
}

Html :

<div class="bg"> </div>

Answer 2

you can use the vh CSS values (relative to viewport height): this will set the height to 1/10th of the height of the viewport:

    background-image:url('*YOUR URL HERE*');
    background-repeat:no-repeat;
    background-size:contain;
    min-height:10vh;