```html
<!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>
```

Hi! now i have problem with this code to make background to responsive with full size.
so firstly, it has to be responsive for mobile
and secondly, background height be 100% without content so i can see full image all the time.
i already tried background-size:cover but it is not working in my code :(
where should i fix to make background to full size?

any help will so appreciated. thanks! :D