How to get background image to cover the whole page

Question

Can't get the bg.png to cover the whole page. It only takes up a header space, but I want the whole page to be covered with the image and the contact form to be on top of that.

Tried to change padding and margins to 0, didn't work. Is it even possible to have the header be the whole page? I am sourcing the background image from an image that is in my folder. I also had trouble getting the header to turn from black and on the left to white and in the middle. To fix that I had to do a separate class which I called "test" in order to just move it to the middle. Maybe I made an error in the code?

<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

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

Use these styles

Answer 2

First create a div that is for your background. Then use that div to apply the background image

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

Answer 3

You can use this code

        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 4

Add background: url(bg.png) no-repeat center; to your body.

Something like this :

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

Right now, you are adding background-image to your div which does not cover the entire page.