ad box class img display problem

image display problem

[bid4abook]

Hi,
I am hoping someone can help me. I am using multiple adboxs on my site and wish to place images in each adbox behind some text. I have tried using the z-index property but the images will not render behind the text. The code I am using is as follows:

css

.adbox {
padding: 2px 10px 2px 5px;
margin: 0 px 5px 0;
border: 1px dotted #B1B1B1;
background-color: #ffffff;
}
.leftimg {
float: left;
margin-right: 5px;
}

Which displays the img in the top left hand corner of the adbox. I really want the images to display behind the text, what is the answer?

Any help is appreciated.

[alt131]

Hi bid4abook,

z-index will only be applied to elements with a position other than static. Float will not "stack" the text on top of the image - it will float the image to the left (as you are describing), without changing the "stack order" of the elements themselves.

There are several ways to achieve this. One is what you tried - using z-index to "stack" the text "on top" of the image:

css
div.adbox {position:relative; width:100px; height:50px;}
.adbox p {position:absolute; z-index:99; top:0; left:0;}
HTML
<div class="adbox">
<img src ="myimage.jpg" width="100" height="50" >
<p>my text</p>
</div>

Another option is to set the background image as a background. That technique makes more sense as it sounds like what you actually want to do:

css
div.adbox2 { background: url(myimage.jpg) no-repeat; width:100px; height:50px; }
.adbox2 p {text-align:center; padding:1em 0;}
HTML
<div class="adbox2">
<p>my text</p>
</div>

[bid4abook]

alt131,
Thanks option two works perfectly, many thanks. Regards bid4abook.