题

我一直工作在此的几个小时，似乎无法环绕它我的头。 我有三张图片，下面，我想文本内容坐的这些顶级，但我怎么办呢？点击 中间图像是将需要重复作为容器的div扩展图像。

好吧，我也为我的信息缺乏道歉，这是一个有点晚了，我不完全是想直。我想包括与所有三个图像的容器。此容器的最小高度将是在顶部和底部的图像。作为内容开始溢出本最小高度，中间图像将开始重复，以容纳更多的高度。

顶部： 替代文本http://files.droplr.com/files/45544730/INDf3。 Page.png

中东重复： 替代文本http://files.droplr.com/files/45544730/ INE5i.Page-Tile.png

下： 替代文本http://files.droplr.com/files/45544730/ INFbt.Page-Bottom.png

有帮助吗？

解决方案

我的解决方案：

我通常它是这样的：

<div class="box">
  <span class="header"></span>
  content
  <span class="bottom"></span>
</div>

的CSS：

.box { background: url(middle.png) repeat-y left top; }
  .box .header { background: url(top.png) no-repeat; display: block; margin-bottom: -480px; /* +set height and width */}
  .box .bottom { background: url(bottom.png) no-repeat; display: block; /*+ height and width*/}

通常，股利底部是如此之小它的确定留空（以添加间距整体设计）。此外，负下边距的大小应该是： - （height - what_you_want_to_remain_empty） - 也就是说，如果你的.box .header图像有540px并要离开顶部50px空，你设定-490px因为我有

好运。

其他提示

TRY FOLLOWING

<div style="background:url(../top.png) no-repeat;">
  Top
</div>

<div style="background:url(../middle.png)">
  Middle:
</div>

<div style="background:url(../bottom.png) no-repeat;">
  Bottom
</div>

给类，而不是在你的样式表处理它

<div class='top'>
</div>
<div class='middle'>
</div>
<div class='bottom'>
</div>

给每个单独的div background CSS样式。

不过，我会建议，的结果 给background样式的文本div，与box-shadow和border一起。结果 在这种情况下，你只需要在中的图像。

具有到目前为止的代码将是有益的，但我会试一试。

您将需要的容器为每个图像。

<div class="head"></div>
<div class="text">TEXT HERE</div>
<div class="foot"></div>

- CSS - 

div.head { 
  background-image:url('top.png');
  background-repeat:no-repeat;
}
div.text {
  background-image:url('middle.png');
  background-repeat: repeat-y;
}
div.foot {
  background-image:url('bottom.png');
  background-repeat:no-repeat;
}

我可能会想做出相同大小的最后一个图像的第一形象，让第2图像填充的需要。

我觉得塞思·M的答案，你需要为顶（头）和底部（脚）DIV提供高度。

然后将正常工作。

div.box:before {content:url(top.png);}
div.box {
  background-image:url(middle.png) repeat-y;
  width:?;
  margin:0;
  padding:0;
}
div.box:after {content:url(bottom.png);}

这是一个美妙的事情，这使顶部和底部的图片作为图像框，但总是第一个和最后。当然，这是行不通的，如果你有保证金或垫衬，但尝试过这样做的：

div.box > div {padding:10px;}

<div class="box"><div>
  Content goes here
</div></div>

这应该给你你想要的东西，在一种奇怪的方式。要注意的是旧的浏览器不支持这些CSS规则。

下面是一个使用您发布的图片与HTML / CSS一个FUL代码。报头部分是相当“高”。我认为它的部分设计的。

<html>
<head>
<style type="text/css">
div.top, div.body, div.footer {
margin: 0 auto;
width: 844px;
color: #ffffff;
background-color: #666666;
padding-left: 10px; /* edit accordingly */
}

div.top {
background: url(http://files.droplr.com/files/45544730/INDf3.Page.png) no-repeat;
height: 426px;
}
div.body {
background: url(http://files.droplr.com/files/45544730/INE5i.Page-Tile.png) repeat-y;
height: 200px;
}
div.footer {
background: url(http://files.droplr.com/files/45544730/INFbt.Page-Bottom.png) no-repeat left bottom;
height: 100px;
}
</style>
</head>
<body>
<div class="top">top
</div>
<div class="body">body
</div>
<div class="footer">footer
</div>
</body>
</html>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top