Div with text overlay an image

Question

I'm trying to figure out how to overlay a div on top of an image.

Here's what I've got so far, I'm totally stuck and have been for a while.

http://wilwaldon.com/learning/slideshow.html

Any help would be greatly appreciated, thank you in advance.

Answer 1

Try adding position:absolute; on the overlay. You might also want to add background:transparent if you want the image to show through.

Answer 2

You could set the image as the background of your Div.

background-image: url (blahblahblah);

Answer 3

<style type="text/css">
.image{
 position:relative;
 width:1001px;
 height:257px;
 }
.overlay{
position:absolute;
left:0;
bottom:0;
width: 300px;
background-color: #fff;
z-index: 600;
}
</style>

changes form original:

1. add dimensions of the image to the container, and set its position to relative

2. set overlay position to absolute and position it by top/bottom and left/right properties