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.

Recommended Answers

All 2 Replies

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>

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...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.