如何让背景图片覆盖整个页面

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