Question

I am trying to overlay a div that has a background image in it over a div that contains a photo using an image tag. The div with the background image is needed because a # will appear in that div over the bg image and both of those will appear on top of the photo.

In simple terms: I am trying to put a div on top of another div. Sorry I am unable to absolute path the images yet but I figure a concept will work regardless.

Code I have is:

<div id="contestLeaders">
    <div class="leader"><img src="css/images/chili-photo.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div>
    <div class="leader"><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div>
</div>
<div class="leaderRating">5.0</div>

CSS:

#contestLeaders {overflow:hidden;}
#contestLeaders .leader {float:left; margin-right:4px;}
.leaderRating {background:url(images/leader-rating-bg.png) no-repeat; width:138px; height:37px; color:#fff;font-size:18px;padding:10px 0px 0px 35px;}

Answer 1

I suppose you want .leaderRating DIV on top of the other DIV’s with images.
To achieve this try the following modifications:

• put the overlaying DIV (.leaderRating) inside the main container (#contestLeaders)
• add the following CSS styles: { position: relative; } for the container and { position: absolute; top: 0; } for the overlay

This way you are absolute-positioning the overlay relative to the container.
In the end, you shoud come up with the following code:

HTML:

<div id="contestLeaders">
                    <div class="leader"><img src="css/images/chili-photo.jpg" width="138" height="138" /></div>
                    <div class="leader"><img src="css/images/chili-photo2.jpg" width="138" height="138" /></div>
                    <div class="leader"><img src="css/images/chili-photo3.jpg" width="138" height="138" /></div>
                    <div class="leader"><img src="css/images/chili-photo4.jpg" width="138" height="138" /></div>
                    <div class="leader"><img src="css/images/chili-photo5.jpg" width="138" height="138" /></div>

                    <div class="leaderRating">5.0</div>

                </div>

CSS:

    #contestLeaders {overflow:hidden; position: relative; }
    #contestLeaders .leader {float:left; margin-right:4px;}
    .leaderRating {background:url(images/leader-rating-bg.png) no-repeat; width:138px; height:37px; color:#fff;font-size:18px;padding:10px 0px 0px 35px; position: absolute; top: 0; }