css - how to make full size background image without specific height?

Question

Welcome To Ask or Share your Answers For Others

css - how to make full size background image without specific height?

asked Jan 27, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - how to make full size background image without specific height?

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>

body {width:100%;
      height:100%;
      margin:0;
      padding:0;}

#star_box {width:100%;
           height:auto;
           overflow:hidden;
           display:block;
           background-image:url('https://www.rakuten.ne.jp/gold/sappun/promotion/test.jpg') ;
           background-size: cover;
           background-repeat: no-repeat;
           background-position: center top;}

.star {color:white;
       animation-name:zoomin;
       animation-duration:5s;
       text-align:center;
       animation-iteration-count:infinite;}

.star2 {color:white;
       animation-name:zoomin;
       animation-duration:5s;
       text-align:center;
       animation-iteration-count:infinite;
       animation-delay:.5s;}

@keyframes zoomin {
    0%{
 transform: scale(0,0) rotateZ(0deg);
    }
  25%{
   transform: scale(4,4) rotateZ(80deg); 
    }
  50%{
   transform: scale(0,0) rotateZ(0deg);
    }
  100%{
   transform: scale(0,0) rotateZ(0deg);
    }
}

#star_box > p:nth-child(1) {margin-left:450px;
                            margin-top:150px;}

#star_box > p:nth-child(2) {margin-left:400px;
                            margin-top:10px;}
                            
#star_box > p:nth-child(3) {margin-left:-450px;
                            margin-top:350px;}
                            
#star_box > p:nth-child(4) {margin-left:-530px;
                            margin-top:30px;}
                            
#star_box > p:nth-child(5) {margin-left:280px;
                            margin-top:-200px;}                         

#empty_box {width:80%;
            height:1200px;
            display:block;
            margin:0 auto;
            margin-top: -350px;}

#text {text-align:center;
       color:white;
       font-size:50px;
       margin-top:250px;
       opacity:0;
       transition:opacity .3s linear;}
       
#empty_box:hover ~ #text {opacity:1;}      

</style>


</head>
<body>

<div id="star_box">

    <p class="star">&#10022;</p>
    
    <p class="star2">&#10022;</p>
    
    <p class="star">&#10022;</p>
    
    <p class="star2">&#10022;</p>
    
    <p class="star">&#10022;</p>
    
    <div id="empty_box"></div>
    
    <p id="text">今すぐ見る</p>
</div>


</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-01-27T04:40:03+0000

Using height will be relative to your container, and using background-size: cover will stretch your image to match the container, which why both of them don't guarantee the image will be at the size of full screen.

You can use vh and vw for that, like this:

.img {
 height: 100vh;
 width: 100vw;
 background-size: cover;
 background-repeat: no-repeat;
}

Categories

css - how to make full size background image without specific height?

css - how to make full size background image without specific height?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags