如何使背景圖像充滿高度

Question

我只是把背景圖片放在我的手機頁面上，但由於某種原因，圖像不適合整個屏幕的高度。

它看起來像這樣的時刻：

我嘗試使用溢出汽車，但它會創建一個額外的滾動條，以y軸：

哪有我刪除該欄並保持圖像適合整個屏幕？

我試圖在CSS什麼看起來是這樣的：

#deposit-background #outer-wrapper{ 
    background-image: url('img/bg.png'); 
    background-size: cover; 
    background-color: black; 
    overflow: auto; 
} 

You will the scrolling bar if you run my pen here

Answer 1

在你的CSS嘗試以下操作：

background-repeat: repeat; 

Answer 2

如果你想擺脫額外的滾動條，請使用overflow: hidden屬性。

#deposit-background #outer-wrapper, 
 
#deposit-background { 
 
    height: 100%; 
 
} 
 
#deposit-background #outer-wrapper { 
 
    background-image: url('img/bg.png'); 
 
    background-size: cover; 
 
    background-color: black; 
 
    overflow: hidden; 
 
} 
 
div.content { 
 
    padding: 0 30px; 
 
} 
 
ul.content-ul { 
 
    list-style: none; 
 
    display: flex; 
 
    padding: 0; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 
ul.content-ul li { 
 
    margin: 0; 
 
    padding: 14px; 
 
    padding-bottom: 0; 
 
} 
 
ul.content-ul li a { 
 
    margin: 0; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 14pt; 
 
    text-transform: uppercase; 
 
    display: block; 
 
} 
 
div#deposit { 
 
    overflow: auto; 
 
    padding: 10px; 
 
} 
 
div#deposit i { 
 
    color: white; 
 
    vertical-align: -webkit-baseline-middle; 
 
} 
 
div#deposit img { 
 
    float: right; 
 
} 
 
div.master-maestro { 
 
    background-color: white; 
 
    width: 200px; 
 
    text-align: center; 
 
    border-radius: 10px; 
 
    margin: auto; 
 
} 
 
.payment-methods { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 
.payment-methods .box { 
 
    text-align: center; 
 
} 
 
.payment-methods img { 
 
    margin: 2px; 
 
} 
 
.image-wrapper { 
 
    background-color: white; 
 
    border-radius: 10px; 
 
    width: 170px; 
 
    margin: 6px; 
 
    padding: 8px; 
 
} 
 
.box p { 
 
    color: white; 
 
} 
 
p.lock { 
 
    text-align: center; 
 
    clear: both; 
 
    color: white; 
 
} 
 
div.cont { 
 
    height: 200px; 
 
} 
 
/*-------------------------------------------- 
 
    BONUS LINK 
 
--------------------------------------------*/ 
 

 
div.cont.bonus h4, 
 
div.cont.bonus h2, 
 
div.cont.bonus h3 { 
 
    text-align: center; 
 
} 
 
div.cont.bonus .input { 
 
    background-color: transparent; 
 
    border: 0; 
 
    border-bottom: 1px solid white; 
 
    padding: 10px; 
 
    margin: 30px 0; 
 
    /* width: 100%;*/ 
 
} 
 
div.cont.bonus h4 { 
 
    color: white; 
 
} 
 
div#activate { 
 
    text-align: center; 
 
    margin-bottom: 30px; 
 
} 
 
a.activate { 
 
    color: white; 
 
    background-color: #e50376; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    width: 100px; 
 
    text-transform: uppercase; 
 
} 
 
li a.active-class { 
 
    color: #e50376 !important; 
 
} 
 
span.bonus-promotions a:visited, 
 
span.bonus-promotions a { 
 
    color: white; 
 
    text-decoration: underline; 
 
} 
 
/*-------------------------------------------- 
 
    Deposit 
 
---------------------------------------------*/ 
 

 
.deposit-content h2, 
 
.deposit-content h3 { 
 
    text-align: center; 
 
} 
 
.deposit-content { 
 
    text-align: center; 
 
    padding-bottom: 80px; 
 
    overflow: hidden; 
 
} 
 
.amount-box { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.deposit-content input { 
 
    display: inline; 
 
    background-color: transparent; 
 
    border: 0; 
 
    border-bottom: 1px solid white; 
 
    margin: 20px; 
 
    margin-bottom: 0; 
 
    margin-left: 0; 
 
    padding: 10px; 
 
} 
 
.amount-box > div { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
    padding: 5px; 
 
    border: 1px solid white; 
 
    border-radius: 10px; 
 
    margin: 5px; 
 
} 
 
.amount-box > div a { 
 
    color: white; 
 
} 
 
input { 
 
    display: inline; 
 
    background-color: transparent; 
 
    border: 0; 
 
    border-bottom: 1px solid white; 
 
} 
 
div.bonus-box span { 
 
    vertical-align: baseline; 
 
} 
 
input[type="checkbox"] { 
 
    background-color: #b5d3e5; 
 
    border: 0; 
 
    padding: 5px; 
 
    width: 20px; 
 
    height: 20px; 
 
    vertical-align: sub; 
 
} 
 
.deposit-content a { 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
} 
 
.bonus-box { 
 
    margin: 1em; 
 
} 
 
.pink { 
 
    color: white; 
 
    background-color: #e50376; 
 
    padding: 10px; 
 
    font-weight: bold; 
 
} 
 
.max-out { 
 
    background-color: #e50376; 
 
    vertical-align: -webkit-baseline-middle; 
 
    margin: 0 11px; 
 
    width: 40px; 
 
    color: white; 
 
} 
 
.max-out:visited { 
 
    color: white; 
 
} 
 
.terms { 
 
    text-decoration: none; 
 
    color: white; 
 
    text-transform: uppercase; 
 
} 
 
.card-details { 
 
    position: relative; 
 
    background-color: #528092; 
 
    border-radius: 10px; 
 
    max-width: 500px; 
 
    width: 100%; 
 
    height: 250px; 
 
    margin: auto; 
 
    padding: 10px; 
 
} 
 
.card-details .bo1 input { 
 
    float: right; 
 
} 
 
.card-details a.deposit-now { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 20px; 
 
    background-color: #e50376; 
 
    margin-bottom: 15px; 
 
    padding: 10px; 
 
} 
 
.card-box { 
 
    display: none; 
 
} 
 
.card-box i.fa.fa-angle-left { 
 
    color: white; 
 
    font-size: 26pt; 
 
    display: run-in; 
 
    margin-left: -16px; 
 
    position: absolute; 
 
    left: 22px; 
 
} 
 
.card-box .card-details input { 
 
    background: transparent; 
 
    border: 0; 
 
    border-bottom: 1px solid white; 
 
    margin: 0; 
 
} 
 
.card-box .card-details .bo2 { 
 
    overflow: hidden; 
 
    padding-top: 40px; 
 
} 
 
.card-box .card-details .bo2 input { 
 
    width: 100%; 
 
} 
 
/*-------------------------------------------- 
 
    HISTORY LINK 
 
---------------------------------------------*/ 
 

 
.history h3 { 
 
    margin-bottom: 20px; 
 
    color: black; 
 
} 
 
.history h3, 
 
.history .buttons, 
 
.history > a { 
 
    text-align: center; 
 
} 
 
.history p, 
 
.history input, 
 
.history a { 
 
    color: white; 
 
} 
 
.history input { 
 
    border: 0; 
 
    border-bottom: 1px solid white; 
 
    background: transparent; 
 
    font-weight: bold; 
 
    margin-bottom: 20px; 
 
    padding-bottom: 20px; 
 
} 
 
.history .buttons { 
 
    padding: 10px 0; 
 
} 
 
.history .buttons a { 
 
    background: transparent; 
 
    border: 1px solid white; 
 
    padding: 10px 30px; 
 
    border-radius: 10px; 
 
    width: 150px; 
 
} 
 
.history .buttons a:first-child { 
 
    margin-right: 10px; 
 
} 
 
.history > a { 
 
    background-color: #e50376; 
 
    padding: 10px 30px; 
 
    width: 100px; 
 
    display: flex; 
 
    margin: 40px auto; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
} 
 
.history > p { 
 
    margin-bottom: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 

 
<body id="deposit-background"> 
 
    <div id="outer-wrapper"> 
 
    <?php include 'menu.php';?> 
 
    <div id="deposit"> 
 
     <i class="fa fa-angle-down" aria-hidden="true"></i> 
 
     <img class="cash-deposit" src="images/cash-1.png" alt=""> 
 
    </div> 
 

 
    <div id="warpper"> 
 
     <div class="content"> 
 
     <ul class="content-ul"> 
 
      <li><a id="deposit" class="active-class" href="#">Deposit</a> 
 
      </li> 
 
      <li><a id="withdraw" href="#">Withdraw</a> 
 
      </li> 
 
      <li><a id="history" href="#">History</a> 
 
      </li> 
 
      <li><a id="bonus" href="#">Bonus</a> 
 
      </li> 
 
     </ul> 
 
     <div class="cont deposit"> 
 
      <div id="deposit-container"> 
 
      <h3>Deposit with credit card</h3> 
 
      <div class="master-maestro"> 
 
       <img src="images/promotions/payments.jpg" alt=""> 
 
      </div> 
 
      <h3>Other payment methods</h3> 
 
      <div class="payment-methods"> 
 
       <div class="box"> 
 
       <div class="image-wrapper"> 
 
        <a href=""> 
 
        <img src="images/promotions/visa.jpg" alt=""> 
 
        </a> 
 
       </div> 
 
       <p>$10 - $2,000 
 
        <br/>Fee.2,5%</p> 
 
       </div> 
 
       <div class="box"> 
 
       <div class="image-wrapper"> 
 
        <a href=""> 
 
        <img src="images/promotions/mastercard.jpg" alt=""> 
 
        </a> 
 
       </div> 
 
       <p>$10 - $2,000 
 
        <br/>Fee.2,5%</p> 
 
       </div> 
 
       <div class="box"> 
 
       <div class="image-wrapper"> 
 
        <a href=""> 
 
        <img src="images/promotions/maestro.jpg" alt=""> 
 
        </a> 
 
       </div> 
 
       <p>$10 - $2,000 
 
        <br/>Fee.2,5%</p> 
 
       </div> 
 
       <div class="box"> 
 
       <div class="image-wrapper"> 
 
        <a href=""> 
 
        <img src="images/promotions/skrill-money-brookers.jpg" alt=""> 
 
        </a> 
 
       </div> 
 
       <p>$10 - $2,000 
 
        <br/>Fee.2,5%</p> 
 
       </div> 
 
       <div class="box"> 
 
       <div class="image-wrapper"> 
 
        <a href=""> 
 
        <img src="images/promotions/neteller.jpg" alt=""> 
 
        </a> 
 
       </div> 
 
       <p>$10 - $2,000 
 
        <br/>Fee.2,5%</p> 
 
       </div> 
 
      </div> 
 
      <p class="lock">Your transactions are safe with us!</p> 
 
      </div> 
 

 
      <div class="deposit-content"> 
 
      <h2>Select Amount</h2> 
 
      <div class="amount-box"> 
 
       <div class="25"> 
 
       <a href="">$25</a> 
 
       </div> 
 
       <div class="50"> 
 
       <a href="">$50</a> 
 
       </div> 
 
       <div class="100"> 
 
       <a href="">$100</a> 
 
       </div> 
 
      </div> 
 
      <!-- amount box --> 
 
      <input class="input" type="text" name="bonuscode" placeholder="Bonus Code"> 
 
      <div class="bonus-box"> 
 
       <span><input type="checkbox" name="bonuscode"> I want a bonus<a class="max-out" href=""> Max<br>out</a></span> 
 
      </div> 
 
      <p>You are only claiming $50 of your bonus! 
 
       <p>By claiming this bonus you agree to the <span><a class="terms" href="">terms.</a></span> 
 
       </p> 
 
      </p> 
 
      <a class="pink" href="#">Enter Card Details</a> 
 

 
      </div> 
 
      <!-- deposit - content --> 
 
      <div class="card-box"> 
 
      <div class="card-details"> 
 
       <div class="bo1"> 
 
       <img src="" alt="VISA ICON" class="visa"> 
 
       <input type="text" placeholder="USERNAME"> 
 
       </div> 
 
       <div class="bo2"> 
 
       <p class="card-number">CARD NUMBER</p> 
 
       <input class="card-input" type="text" /> 
 
       </div> 
 
       <a href="#" class="deposit-now" style="color:white">DEPOSIT NOW</a> 
 
      </div> 
 
      </div> 
 

 
     </div> 
 
     <div class="cont withdraw"> 
 
      <div id="withdraw-container"> 
 
      <h3>Withsraw to bank</h3> 
 
      <div class="master-maestro"> 
 
       <img src="#" alt=""> 
 
      </div> 
 
      <h3>Other withDrwal methods</h3> 
 
      <div class="withdraw-boxes"> 
 
       <div class="withdraw-boxes-wrapper"> 
 
       <img src="images/promotions/wiretransfer.jpg" alt="Wiretransfer"> 
 
       <p>$20 - $100,00 
 
        <br/>Add new method</p> 
 
       <p>2 to 4 business 
 
        <br/>days</p> 
 
       </div> 
 
       <div class="withdraw-boxes-wrapper"> 
 
       <img src="images/promotions/skrill-money-brookers.jpg" alt="Skrill Moneybrookers"> 
 
       <p>$20 - $100,00 
 
        <br/>Add new method</p> 
 
       <p>2 to 4 business 
 
        <br/>days</p> 
 
       </div> 
 
       <div class="withdraw-boxes-wrapper"> 
 
       <img src="images/promotions/neteller.jpg" alt="NETELLER"> 
 
       <p>$20 - $100,00 
 
        <br/>Add new method</p> 
 
       <p>2 to 4 business 
 
        <br/>days</p> 
 
       </div> 
 
      </div> 
 
      <p class="lock">Your transactions are safe with us!</p> 
 
      <div class="withdrwable-box"> 
 
       <h4>Withdrawable Balance $o</h4> 
 
       <h6>Enter amount</h6> 
 
       <input type="text"> 
 
       <p>Enter Bank Details</p> 
 
       <div class="form"> 
 
       <input type="text" placeholder="Bank Name"> 
 
       <input type="text" placeholder="Bank Code"> 
 
       <input type="text" placeholder="Bank Branch Address"> 
 
       <input type="text" placeholder="Account Holder's Name"> 
 
       <input type="text" placeholder="Account number"> 
 
       <input type="text" class="swift" placeholder="SWIFT"> 
 
       </div> 
 
      </div> 
 
      <a class="withdraw" href="#">Withdraw</a> 
 
      </div> 
 
     </div> 
 
     <div class="cont history"> 
 
      <h3>Select Dates</h3> 
 
      <p>From:</p> 
 
      <input class="from" type="text"> 
 
      <p>To:</p> 
 
      <input class="to" type="text"> 
 
      <div class="buttons"> 
 
      <a href="#">Deposit</a> 
 
      <a href="#">Withdrwals</a> 
 
      </div> 
 
      <a href="#">Show</a> 
 
     </div> 
 
     <div class="cont bonus"> 
 
      <h3>You have no active Bonus on your account</h3> 
 
      <h4>Got a Bonus code?</h4> 
 
      <input class="input" type="text" name="bonuscode" placeholder="Bonus Code"> 
 
      <div id="activate"> 
 
      <a class="activate" href="#">Activate Now</a> 
 
      </div> 
 
      <h4>Check out our <span class="bonus-promotions"><a href="#">promotions</a></span></h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <?php include 'footer.php';?> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="js/owl.carousel.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script src="js/jssor.slider-21.1.6.mini.js" type="text/javascript"></script> 
 
    <script type="text/javascript" src="main.js"></script>