有电子邮件表单的背景图片？

I have an email form created and I have an image I would like to be the background for the whole form. I have tried using the CSS background-image as well as using html to use the background image.

All of the tutorials I have found are only showing me how to have an image as the actual text box (ie a magnifying glass inside of a search form). I want the image to be behind the whole form.

what my code currently produces: http://testing.egfederation.com/contact/contact.php

My HTML

<div id = "contentwrap"><div class = "contact">
  <img src="CSS/Bracket.png">
  <form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
  <input type ="text" name = "message" placeholder="Full Name"> <br>
  <input type="text" name="from" placeholder="Email Address"><br>
  <input type="text" name="subject" placeholder="Subject"><br>
  <textarea rows="10" cols="35" name="message" placeholder="Please Enter your message here."></textarea><br>
  <input type="submit" name="submit" value="Submit">
  </form></div> </div> 

My CSS

.contact {

    height:600px;
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
#contentwrap {
    float:right;
}

.contact img{
    z-index:-1;
}

Try this:

div#contentwrap{
    background-image:url("image URL here");
    background-repeat:; /* if you need it */
    background-size:; /* if you need it */
    }

If you want some more info, W3Schools has some pretty useful pages on CSS backgrounds.

You can try

.contact {
    position: relative;
}

.contact form {
position: relative;
    z-index: 2;
}

/* it is better to have a more specific selector */

.contact img.background {
    z-index: 1;
}

You can try:

remove: <img src="CSS/Bracket.png">

css:

.contact {
    margin: 0 auto;
    width:310px;
}
#contentwrap{
    height:600px;
    width:800px;
    padding:60px 0;
    margin: 0 auto;
    background-image:url('http://testing.egfederation.com/contact/CSS/Bracket.png');
    background-repeat:no-repeat;
}

DEMO

You can try

.contact {
    height:600px;
    width:800px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
}
#contentwrap {
    float:right;
    background-image:url("image url");
    background-size: 480px 360px;
    background-repeat: no-repeat;
    z-index:-1;
}

.contact img{
    z-index:-1;
}

JSFIDDLE