Wrap a contact form around background image - css

Question

How do I wrap a contact form around a backgroud image (eg. a desktop screen). For further clarification, please visit this link. Scroll down to the bottom of the page and you'll see a mac screen background wraped inside of a login page.
<div id="new_div_3">
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" placeholder="John Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe#example.com" required />
<span class="form_hint">Proper format "name#something.com"</span>
</li>
<li>
<label for="website">Website:</label>
<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</form>
</div>
This is what i currently have in my new_div_3.
#new_div_3 {
margin:0 auto;
width: 500px;
background:#ECF0F1 url('img/email-screen.png') 0 0 no-repeat;
background-size: 1040px 878px;
padding: 38px 38px 267px;
}
Is there a way of making the background appear correctly, in the center of the div with the addition of the contact form appearing in the center too?

Answer 1

I think you're looking for something like:
background:#ECF0F1 url('img/email-screen.png') no-repeat center center;
If you are using firefox or chrome, you can use inspect element to see how it has been setup in the example you provided.