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" />

Solution 1

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!

Solution 2

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

Solution 3

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.

Solution 4

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

Solution 5

You need to set z-indexes in css.

<img src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\gradient box.gif" 
    style="position:absolute; z-index: 50; top: 155px; left: 480px; width:auto; height:auto;">


<input type="text" class="tb7" value="Username" style="margin-left: 563px; z-index: 50;position: relative;" maxlength="20"
    onfocus="if(this.value == 'Username') {this.value='';}" />      
</br>

<input type="text" class="tb8"  value="Password" style="margin-left: 563px; z-index: 50;position: relative;"   maxlength="20"
    onfocus="if(this.value =='Password') {this.value='';}" />

<input type="image" height="25px"   width="67px" style="vertical-align:top; z-index: 50; position: relative;"
    src="C:\Users\George\Documents\HTML\My Local Soccer\pics\icons\sign in.gif" />

Keep in mind that for using z-index you'll need to specify the position as I did it, even if you want to use the default position.

View more solutions