如何才能使背景图像充满高度

Question

我只是将背景图片放到我的移动页面上，但出于某种原因，图像在高度方面不适合整个屏幕。

目前看起来像这样：

我尝试使用overflow auto但它会在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

如果您想要删除其他滚动条，请使用overflow: hidden属性。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在CSS中尝试以下操作：

background-repeat: repeat;