How to make background image of full height-CodePudding

<div >
             <div  style="background-image: url('./assets/images/back-video.png');">
               <a href="#">
                  <img src="./assets/images/play-icon.png" alt=""  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.

CodePudding user response：

you have to use "height:100vh"

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

CodePudding user response：

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 >
    <div  >
               <a href="#">
                  <img src="./assets/images/play-icon.png" alt=""  >
               </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')
}