如何讓背景圖片覆蓋整個頁面

Question

無法讓 bg.png 覆蓋整個頁面。 它只占用 header 空間，但我希望整個頁面都被圖像覆蓋，並且聯系表格位於其之上。

嘗試將填充和邊距更改為 0，但沒有用。 甚至可以讓 header 成為整個頁面嗎？ 我正在從我文件夾中的圖像中獲取背景圖像。 我也很難讓 header 從黑色和左側變成白色和中間。 為了解決這個問題，我必須做一個單獨的 class ，我稱之為“測試”，以便將它移動到中間。 也許我在代碼中犯了錯誤？

<div class="contact-section"></div>
    <h1 class="test">Contact Us</h1>
    <div class="border"></div>
    <form class="contact-form" action="index.html" method="post">
        <input type="text" class="contact-form-text" placeholder="Your name">
        <input type="text" class="contact-form-text" placeholder="Your email">
        <input type="text" class="contact-form-text" placeholder="Your Phone #">
        <textarea class="contact-form-text" placeholder="Your message">   
        </textarea>
        <input type="submit" class="contact-form-btn" value="Send">

    </form>

    margin:0;
    padding:0;
    font-family: "montserrat", sans-serif;
}

.contact-section{
    background: url(bg.png) no-repeat center;
    background-size: cover;
    padding:40px 0;
  }

  .test{
    text-align: center;
    color: #ddd;
  }

  .border{
    width:100px;
    height: 10px;
    background: #34495e;
    margin: 40px auto;
  }

  .contact-form{
    max-width: 600px;
    margin: auto;
    padding:0 10 px;
    overflow: hidden;
  }
  .contact-form-text{
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 16px 0;
    border: 0;
    background: #111;
    padding:20px 40px;
    outline: none;
    color: #ddd;
    transition: 0.5s;
  }

  .contact-form-text:hover{
    box-shadow: 0 0 10px 4px #34495e;
  }

  textarea.contact-form-text{
    resize: none;
    height: 120px; 

  }

  .contact-form-btn{
    float:right;
    border: 0;
    background: #34495e;
    color:#fff;
    padding:12px 50px;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.5s;
  }
  .contact-form-btn:hover{
    background: #2980b9;
  }

Answer 1

您可以使用此代碼

 body { margin: 0; padding: 0; font-family: "montserrat", sans-serif; }.contact-section{ background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 40px 0; height: 100vh; min-height: 100%; }.test{ text-align: center; color: #ddd; }.border{ width: 100px; height: 10px; background: #34495e; margin: 40px auto; }.contact-form{ max-width: 600px; margin: auto; padding: 0 10px; overflow: hidden; }.contact-form-text{ display: block; width: 100%; box-sizing: border-box; margin: 16px 0; border: 0; background: #111; padding: 20px 40px; outline: none; color: #ddd; transition: 0.5s; }.contact-form-text:hover{ box-shadow: 0 0 10px 4px #34495e; } textarea.contact-form-text{ resize: none; height: 120px; }.contact-form-btn{ float:right; border: 0; background: #34495e; color:#fff; padding:12px 50px; border-radius: 20px; cursor: pointer; transition: 0.5s; }.contact-form-btn:hover{ background: #2980b9; }

 <div class="contact-section"> <h1 class="test">Contact Us</h1> <div class="border"></div> <form class="contact-form" action="index.html" method="post"> <input type="text" class="contact-form-text" placeholder="Your name"> <input type="text" class="contact-form-text" placeholder="Your email"> <input type="text" class="contact-form-text" placeholder="Your Phone #"> <textarea class="contact-form-text" placeholder="Your message"> </textarea> <input type="submit" class="contact-form-btn" value="Send"> </form> </div>

Answer 2

  background: url('image path') no-repeat;
  background-size: cover;

使用這些 styles

Answer 3

添加background: url(bg.png) no-repeat center; 到你的身體。

像這樣的東西：

body {
    display: block;
    margin: 8px;
    background: url(bg.png) no-repeat center;
}

現在，您正在將 background-image 添加到不覆蓋整個頁面的 div 中。

Answer 4

首先為您的背景創建一個 div。 然后使用該 div 應用背景圖像

.background {
  width: 100%;
  height: 100vh;
  background: url(your image link) center no-repeat;
  background-size: cover;
}