Positioning an image behind a centered div

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.

If content has to be on top, wouldn't work setting the image as css background? — Miquel, May 08 '11 at 09:33
Z-Index didn't work unfortunately, and no - there is already a background on the page. Cheers anyway. — Sam, May 08 '11 at 09:34

seler · Accepted Answer · 2011-05-08T09:46:09.327

9

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/

edited May 08 '11 at 09:46

answered May 08 '11 at 09:39

seler

8,803
4
41
54

if you have other elements affecting it play with `z-index` (remember: it only applies to `position:relative or absolute`). – seler May 08 '11 at 09:48
What you provided didn't work for me, however the left 50% was what I needed to get that offset where it needed to be. Cheers. You have no idea how long this has been getting to me! – Sam May 08 '11 at 09:54

score 0 · Answer 2 · answered May 08 '11 at 09:40

the solution is to have a surrounding div on the #content div, and that surroinding div positioned absolutely and with a defined width and height.

Ex:

html:

<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>

CSS:

#outter {
width: 1000px;
height: 300px;
position: relative;
}

#image {
width: 1000px;
height: 300px;
position: absolute;
}

#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}

#content {
margin: 0 auto;
width: 900px;
}

Example here: http://jsfiddle.net/qwEhv/

Thanks for the effort, but this does not work. I used this random image I found which was smaller than what you had - http://jg.msdpt.k12.in.us/staff/Huckaby/splat.gif - and it did not appear to the right - it was left aligned. — Sam, May 08 '11 at 09:47

score 0 · Answer 3 · answered May 08 '11 at 09:48

"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."

What you might need to do here is to have an additional div - call it #contentWrapper for example and center it using margin-left and right, set position to relative. Put div #content inside the wrapper div and position absolute. This should allow you to make #content look centered.

Positioning an image behind a centered div

3 Answers3

Linked