How to make background image of full height

Question

 <div class="col-lg-12 text-center"> <div class="for-video-background" style="background-image: url('./assets/images/back-video.png');"> <a href="#"> <img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;"> </a> </div> </div>

I want the background image to take full height and the sub-image must align the center of the background image. And at last it must be responsive.

Answer 1

you have to use "height:100vh"

    <div class="col-lg-12 text-center">
             <div class="for-video-background" style="background-image: url('./assets/images/back-video.png');">
               <a href="#">
                  <img src="./assets/images/play-icon.png" alt="" class="img-fluid" style="width: 5rem;height: 100vh">
               </a>
             </div>
          </div>

Answer 2

Use width:100vh to make full height and use left and right make the image become center.

Use the background-size: cover to resize the background image to cover the entire container.

<div class="col-lg-12 text-center">
    <div class="for-video-background" >
               <a href="#">
                  <img src="./assets/images/play-icon.png" alt="" class="img-fluid" >
               </a>
             </div>
          </div>

CSS:

body{
    margin: 0;
}
img{
    width:5rem;
    position: absolute;
    left: 47.5%;
    top: 47.5%;

}
.for-video-background{
    height: 100vh;
     background-size: cover;
    background-image: url('./assets/images/back-video.png')
}