How do I 'send an image back', behind textboxes?

Question

You can view my problem:

http://i.stack.imgur.com/cGoEU.png

That image is covering my login form. How do I get it to move behind the textboxes & sign in button?

This is my code:

<img src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\gradient box.gif" 
    style="position:absolute; top: 155px; left: 480px; width:auto; height:auto;">
<input type="text" class="tb7" value="Username" style="margin-left: 563px" 
    maxlength="20" onfocus="if(this.value == 'Username') {this.value='';}" />         
</br>
<input type="text" class="tb8"  value="Password" style="margin-left: 563px;"   
    maxlength="20" onfocus="if(this.value =='Password') {this.value='';}"/>
<input type="image" height="25px"   width="67px" style="vertical-align:top;"
    src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\sign in.gif" />

Answer 1

The easiest way to do this is through CSS' z-Index. Basically what it does it define the stacked location of elements. The higher the number, the more on top it is of other elements. Since you did not provide the top HTML for these input fields, I cannot give you a concrete example on how to do this, but I would be happy to help you further if you provide more code.

Answer 2

wrap inputs in a div and and style it with the image in background.

Answer 3

Try:

<div id="form_wrapper" style="background-image:url('img/yellow.png');">
<img src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\gradient box.gif" 
    style="position:absolute; top: 155px; left: 480px; width:auto; height:auto;">
<input type="text" class="tb7" value="Username" style="margin-left: 563px" 
    maxlength="20" onfocus="if(this.value == 'Username') {this.value='';}" />         
</br>
<input type="text" class="tb8"  value="Password" style="margin-left: 563px;"   
    maxlength="20" onfocus="if(this.value =='Password') {this.value='';}"/>
<input type="image" height="25px"   width="67px" style="vertical-align:top;"
    src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\sign in.gif" />
</div>

Enjoy and good luck!

Answer 4

Try with style="z-index:-5;" and position relative or absolute