<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>Quiero que la imagen de fondo tome la altura completa y la subimagen debe alinearse con el centro de la imagen de fondo. Y por último debe ser receptivo.
Tienes que usar "altura: 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 para hacer la altura completa y use left y right para que la image se convierta en el centro.
Use background-size: cover para cambiar el tamaño de la imagen de fondo para cubrir todo el contenedor.
<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') }