Can't display images inside elements

[louisgnarf]

OK, I'm having a problem with inserting images...I have a DIV element that is a "mainbox" of text...similar to a table but just implemented in CSS. I'm trying to insert an image, but the image, despite the HTML being within the mainbox's DIV tags, is put *behind* the mainbox's background. What is going on here? This can't be a problem with the z-index, since the image is inside the mainbox, right?

 

[FesterSXS]

can you post your code please? Tony

http://www.phoenix-paints.co.uk/portfolio

 

[louisgnarf]

Here is the link to my page:

http://www.public.iastate.edu/~dnguyen/sample.htm

The picture I'm referring to is the inset picture of the man. As you can see, there is a brown overlay over the picture...that brownish overlay is a transparent gif used for the background of the mainbox...if i had just used "background:brown"...it would be opaque and you wouldn't see the picture at all. (ignore the other glitches on this page...)

I should clarify...when I don't specify an alignment, the picture appears just fine. In this case, I have specified the "right" alignment, and now the pic is behind the background.

The relative html is:
<div class=&quot;mainbox&quot;>
...
img border=&quot;0&quot; src=&quot;images/jack.jpg&quot; align=&quot;right&quot; width=&quot;350&quot; height=&quot;295&quot;>
</div>

The css code (in a seperate file) is:

.mainbox {
color:white;
background:url('images/common/brown.gif');

position:relative;
width:auto;
min-width:200px;
margin-left:100px; margin-right:170px; margin-top:120px; margin-bottom:20px;
border:3px double black;




padding:2px;
z-index:5;

}