Div with text overlay an image

I'm tr开发者_开发知识库ying 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.

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

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

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

background-image: url (blahblahblah);