Question

我的网站有一个相当复杂的页脚，请参阅http://www.roadsafetyforchildren.co.uk/，不确定如何尝试构建它：

Footer

我将图像分成两部分，下面的第一部分需要水平居中但位于内容下方： enter image description here

第二部分需要水平重复，但要与上图保持一致。 enter image description here

因此，两个图像需要看起来像问题顶部的第一个图像。

我可以匹配两张图片 IF 上面的内容div有一个固定的高度。问题是内容div NEEDS 可灵活地随内容增长/缩小。因此，内容div底部的图像会根据页面的大小在页面上下移动。

如何保持两张图像的上方有灵活的内容div？

P.s有很多答案，但不要以为他们中的一些人已经理解了这个问题。

Answer 1

试试这个：

html, body { margin:0; padding:0; min-height:100%;}
html { background: #color url(repeteable.jpg) center bottom repeat-x; }
body { background: white url(footer.jpg) center bottom no-repeat;}

Answer 2

内容所在的<div>应该是height:auto，并且背景图片的宽度为五个左右，高宽度应该在css中重复y，以及<div class="footer">应该是float:left。这样，页脚将始终低于内容，并且内容的任何高度都将具有重复的背景。

除了为内容创建bg图像外，无需弄乱PS。

这将是内容div的bg图像，而repeat-y则从上到下重复：

页脚图片：

enter image description here

如果你将'背景重复'图像设为png，你可以使投影不透明以适应身体bg图像的变化。

Answer 3

似乎直接向我发送，你需要两个div：

<div id="content">
     <div id="inner_content">
         <!-- Append image to very bottom -->
         <img src="city" width="" height="" alt="" />
     </div>
     <!-- Background image of hills goes here -->
</div>

CSS很直接..

#content { width: 100%; background: url('hills.png') repeat center bottom; }
#inner_content { width: xx; margin: auto; }

Answer 4

您可以在元素中定位背景：

div#footer {
    background: url('roadpic.jpg') bottom center no-repeat;
}


<div id="content">your content goes here</div>
<div id="footer">...</div>

将始终将页脚div保持在内容之下。

Answer 5

您需要两个背景的公共锚点。在水平可调整大小的窗口和小于窗口宽度100％的内容区域之间，两个容器之间唯一可以保持不变的点是主体的水平中心。

因此，您的山丘背景需要居中于身体或其他具有100％窗口宽度的容器。道路图像可以固定在固定宽度的中心容器内（如下例所示），也可以居中在一个居中的可变宽度容器内。

生成的CSS将是这样的：

div#wrapper {
  width: 100%;
  background: url(hills.jpg) center bottom repeat-x #fff;
}
div#content {
  width: 800px;
  margin: 0 auto;
  /* background can be offset to the left or right if the width is fixed
     if not it must be centred */
  background: url(road.png) right bottom no-repeat;
}

HTML：

<body>
  <div id="wrapper">
    <div id="content">
      <p>Some content here</p>
    </div> <!-- content -->
  </div> <!-- wrapper -->
</body>

两个容器的背景都有相同的锚点，当窗口调整大小时它们会一起移动！

因为#content是#wrapper的子节点，所以它们将保持垂直对齐，因为#wrapper会变高，因为#content变得更高（除非#content是一个浮点数，在这种情况下你将不得不使用：after清除技巧;或者如果#content是position：absolute，你需要手动或使用javascript对齐它们。

CSS：与灵活高度内容div下方的图像对齐

5 个答案: