Input text box placed OVER an image in CSS?

[lplplpx3]

I would like to create a newsletter sign up box OVER an existing image similar to the one found here - www.publishyourfirstmagazine.com. Can anyone explain or provide the css and html for how this is done.

I tried using the code below, the text boxes appear first with the tip of the desired background graphic starting just below the text boxes (and not behind.

I am totally confused, you may or may not look at code below I am willing to start from scratch. Thx.

CSS:


.dat_menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
line-height: 8px;
color: #17B3C9;
font-weight: normal;
background-image: url(../Images/Newsletter.jpg);
}

HTML:


<td rowspan="4" align="center" valign="top" class="dat_menu">
<form method="post" action="/Scripts/news_09.php" name="Newsletter">
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER">
<input type="hidden" name="recipients" value="myaddress" />
<input type="hidden" name="required" value="email:Your email address,realname:Your name" />
<input type="hidden" name="subject" value="Newsletter Request" />
<input type="hidden" name="csvfile" value="formdata.csv" />
<input type="hidden" name="csvcolumns" value="email,realname" />
<input type="hidden" name="good_url" value="http://www.test.com/news2.html" />
<input type="hidden" name="bad_url" value="http://www.test.com/news3.html" />

<p class="dat_menu"><br><br>
<div class="has-margins"><div class="has-layout"> <span>
<input name="realname" type="text" class="camp_tx" value="Full Name" size="20" maxlength="50">
</span> </div> </div>

<div class="has-margins"> <div class="has-layout"> <span>
<input name="email" type="text" class="camp_tx" value="E-mail" size="20" maxlength="50">
</span></div> </div>
</p>
<p class="dat_menu">
<input name="Submit" type="submit" class="camp_tx" value="Sign Me Up!">
</p>
</form>
</td>