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

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

Answers


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!


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


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.


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


I'm not sure how your orange rectangle fits into your HTML but elements can be placed in front or behind other elements using the z-index style property which you can append to the style attribute.

More information on this can be found here: http://htmldog.com/reference/cssproperties/z-index/


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.


If you're using a 'gradient box' as background, you should probably consider using CSS for a similar effect instead.


Need Your Help

Excel Formula - Column SUM where two columns match values

excel excel-2007 excel-formula

I have a table where I need to obtain the sum of one column where the values in two other columns match specific criteria.