Question

我有以下问题：

我需要应用一个背景，它有一个重复y，以填充我的div垂直。现在我遇到了问题，它不应该从顶部填充：0但是距离顶部85px，所以我需要像

这样的东西

position:absolute;
top:85px;
bottom:85px;

表示在css中应用的背景。

我的问题的其他一些信息可以在这里找到：How to place a responsive background according to content height with HTML / CSS?

我怎样才能实现这一目标？

我的结构如下：

<content><innercontent></innercontent></content>

内容具有浏览器的整个宽度，而innercontent具有固定的宽度。

#content {
    background: 
    url("images/bg-top.png") no-repeat scroll center top, 
    url("images/bg-bottom.png") no-repeat scroll center bottom, 
    url("/images/bg-middle.png") repeat-y scroll center center transparent;
    position:relative;
}

有人能帮助我吗？

Answer 1

如果我理解正确，只需将其更改为：

#content {
    background: 
    url("images/bg-top.png") no-repeat scroll center top, 
    url("images/bg-bottom.png") no-repeat scroll center bottom, 
    url("/images/bg-middle.png") repeat-y scroll center 85px transparent;
    position:relative;
}

请注意85px代替center作为背景位置y。

http://jsfiddle.net/ghKb2/1/

Answer 2

最后我找到了它：

用这个创建一个div：

#middle-stripe {
  background: url("/wp-content/themes/vitaphone/library/images/bg-middle.png") repeat-y scroll center center transparent;
   position: absolute;
   top:85px;
   bottom:85px;
   width:100%;
 }

CSS：3x3 repeat-y背景顶部和底部限制？

2 个答案: