Question

My site has a 900px div #content that is centered with margin-left: auto and margin-right: auto. I have an image that I need to display behind the div which will partially overlap #content.

The image is set to display as block at present and I can get it to where it needs to be, but it doesn’t allow #content to draw over the image. I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center.

My current positioning, which gets it where it needs to be is:

img#watermark  
{
    margin-left: auto;  
    margin-right: auto;
    display: block;
    padding-left: 900px;
}

#content just needs to appear over the watermark.

Help greatly appreciated.

Answer 1

html:

<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>

css:

div {
    margin:auto;
    width: 512px;
    height: 512px;
    background: rgba(0,0,0,.4);
    position: relative;
}
img {
    position: absolute;
    left: 50%;
    margin-left:-256px;
}

http://jsfiddle.net/Db2cw/