0

Hello,

I have been trying to place textbox on top of image and have not been able to do so.

index.php

<div style="margin: 100px 0 0 0; z-index: 3;">
<input type="text" class="form" name="email">
<input type="text" class="form" name="password">
</div>

<div id="banner-background"></div>
<!--<image src="images/banner.jpg">-->

css/styleT.css

#banner-background{
    background-image:url("../images/banner.jpg");
}


input[type="text"]{
height: 30px;
width: 300px;
margin: 30px 0 0 365px;
z-index: 2;
}

The background image does not appears.

3
Contributors
2
Replies
27
Views
3 Years
Discussion Span
Last Post by Albert Pinto
1

Assign height and width to the #banner-background:

#banner-background {
    width:100%;
    height:100px;
    background: url('/images/banner.jpg') no-repeat top left scroll;
}

Then, if you want, you can assign the background directly to the parent div of the inputs:

<div id="banner-background">
    <input type="text" class="form" name="email">
    <input type="text" class="form" name="password">
</div>
0

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

and pls make sure... z-index of that text box has higher value... than the image...

Edited by Albert Pinto

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.