<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.
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>
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')
}