How to place content below a fixed image?

Question

JSFiddle:

http://jsfiddle.net/qd8Ltufw/6/

I have a page with a background image and content centered over the image. That's all working fine and I have it setup how I need it, but now I need to add content below the image.

CSS for image:

img.home-bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 100px;
}

You can see from the fiddle that when I add any content below the div with the image in it doesn't show below the image. It shows either above it or underneath it. I need to be able to place content under the image that the user can scroll down to see.

Answer 1

Sorry I could not post under your post, due to low rep.

Please see this link and tell me what you think, does this answer your question? Code

$(document).ready(function(){
    $(".home-callout").css("margin-top",$(".home-bg").height()+200);
});

Also, be aware, that when you use background like this, you are fixing an image and whole content will never go below the image itself. See CSS code where min-height: 100%;

Answer 2

When you set something as position: fixed it takes it out of the flow of the document. So other elements will not care where it is on the page and those other elements will not position themselves relative to it. That is why your text just shows up at the top. Because the image is fixed.

I would remove the CSS setting the image as fixed .

CSS:

img.home-bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin-top: 100px;
}

Fiddle: http://jsfiddle.net/qd8Ltufw/8/

If you really want the image fixed and the content to scroll over it you can either position the content some how, maybe setting its margin. Or you can use javascript to get the images height and dynamically set the contents position.

Fiddle: http://jsfiddle.net/qd8Ltufw/10/