z-index

[niche]

I have a blue oval that I'd like to place under a input box that will be used to enter a user's name. I'm using a strict doctype and http://www.w3schools.com/Css/tryit.asp?fil...e=trycss_zindex.

<div style="width:250px; margin: 0 auto;"><img style="margin-bottom:30px;z-index:-1;" border="0" src="inputbox.png" alt="ABCl"  /> <input style="color:DarkSeaGreen;" type="text" value="place your name here" onfocus="this.value='';" /></div>

What do I need to change?

[Ingolme]

You could place the image as a CSS background-image to the container of the input element.

[niche]

The input box hides most of the background-image.Should I be able to create a div, place an image in it with a z-index:-1; and place an input box in the same div (as in my original post) and have it display one on top another?

[Ingolme]

If you used z-index to put an image behind the input element, it would hide the image anyways.You should put the image as the background of the container. If you don't want the input to block out what's behind it, you can set the background-color property to transparent and remove the border.

[niche]

changed to background-color:transparent; and took out the border reference, but got the same result with this script:

<div style="width:250px; margin: 0 auto;"><input style="color:DarkSeaGreen;background-image:url('inputbox.png');background-color:transparent;" type="text" value="place your name here" onfocus="this.value='';" /></div> 

Is this script what you had in mind?

[ShadowMage]

Not quite:

You should put the image as the background of the container.

[niche]

Cool. Thanks to Ingolme and ShadowMage for their time and expertise.Niche