Html 如何在固定图像下放置内容？

JSFiddle：

我有一个页面，背景图片和内容以图片为中心。这一切都很好，我有它的设置，我需要它，但现在我需要添加以下的图像内容

用于图像的CSS：

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

---

您可以从小提琴中看到，当我在div下面添加任何内容时，其中的图像不会显示在图像下面。它要么在上面，要么在下面。我需要能够将内容放在用户可以向下滚动查看的图像下。

很抱歉，由于重复率低，我无法在您的帖子下发布

请查看此链接并告诉我您的想法，这是否回答了您的问题？

---

另外，请注意，当您使用像这样的背景时，您正在修复一个图像，并且整个内容永远不会低于图像本身。参见CSS代码，其中最小高度：100%

当您将某个内容设置为

位置：固定时，它会将其从文档流中删除。因此，其他元素不会关心它在页面上的位置，这些其他元素也不会相对于它定位。这就是为什么你的文本会出现在顶部。因为图像是固定的

我会删除CSS设置，将图像设置为
fixed

CSS:

小提琴：

如果你真的想固定图像并在其上滚动内容，你可以定位内容，或者设置其边距。或者可以使用javascript获取图像高度并动态设置内容位置

Fiddle:
您的HTML不正确，a
-查看HTML面板中的所有红色。不确定您为什么以最奇怪的方式执行此操作，但我修复了HTML语法错误。抱歉，如果我不清楚，我希望图像保持在它所在的位置，并且能够向下滚动并在其下方显示内容。
$(document).ready(function(){
    $(".home-callout").css("margin-top",$(".home-bg").height()+200);
});

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