Make the image go behind the text and keep it in center using CSS
You can position both the image and the text with position:absolute
or position:relative
. Then the z-index property will work. E.g.
#sometext {
position:absolute;
z-index:1;
}
image.center {
position:absolute;
z-index:0;
}
Use whatever method you like to center it.
Another option/hack is to make the image the background, either on the whole page or just within the text box.
Make it a background image that is centered.
.wrapper {background:transparent url(yourimage.jpg) no-repeat center center;}
<div class="wrapper">
...input boxes and labels and submit button here
</div>
Well, put your image in the background of your website/container and put whatever you want on top of that.
Your container defined in HTML:
<div id="container">
<input name="box" type="textbox" />
<input name="box" type="textbox" />
<input name="submit" type="submit" />
</div>
Your CSS would look like this:
#container {
background-image:url(yourimage.jpg);
background-position:center;
width:700px;
height:400px;
}
For this to work though, you must have height and width specified to certain values (i.e. no percentages). I could help you more specifically if you wanted, but I'd need more info.