Overlay Fixed Size Form Field Over Fixed Size Image - html

Question

I have an image that fixes itself to 100% of the page width. It stays the same size (on the screen) no matter what resizing the user does in their browser.
I now need to add a single Enter Your Name form field on top of the image. However, I want the text and form field sizing and position to stay the same no matter what the user does to resize their browser window. This is important because I need to overlay the form field table just perfectly on top of the image or else it will look bad.
Here's my current CSS:
.fixedimage img{
width:100% !important;
height:auto;
display:block;
}
Here's my current HTML:
<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR>
<TD WIDTH="100%">
<div class="fixedimage">
<center><img src="FixedImage.jpg"></center>
</div>
</TD>
</TR>
</TABLE>
How would I overlay the table in a particular spot on top of the FixedImage.jpg? And how would I keep it being the same size when a user resizes or zooms in/out in their browser window?
Thanks for your help with this!!!

Answer 1

See this fiddle:
http://jsfiddle.net/nV7tP/1/
CSS:
.fixedimage{
width:100% !important;
height:auto;
display:block;
background:url(http://www.hdwallpaperspick.com/wp-content/uploads/2013/06/beautiful-autumn-scenery-723-2.jpg);
background-position:50% 50%;
background-size:cover;
}
.fixedimage form{
width:100%;
color:white;
font-size:40px;
text-align:center;
}
.fixedimage form input{
width:250px;
height:30px;
}
Response to the comment below:
Try this fiddle to show the entire background image:
http://jsfiddle.net/nV7tP/2/
.fixedimage{
position:absolute;
width:100% !important;
height:auto;
display:block;
font-size:40px;
}
.fixedimage img{
position:absolute;
}
.fixedimage form{
position:absolute;
width:100%;
color:white;
text-align:center;
}
.fixedimage form input{
width:250px;
height:30px;
}
Note : It would be better if you use the CSS of first posted fiddle.Its the type of CSS mostly used in present popular sites.
Set the image width to 100% .This will give the output you asked:
See this fiddle: http://jsfiddle.net/nV7tP/5/
or if you want a container with minimum width see this http://jsfiddle.net/nV7tP/6/ .