Question

我有一个奇怪的问题，我无法理解：

我有一个标题div，我想显示一个水平重复的背景图像：

HTML：

<div id="headerwrapper">

     <div id="header">
          <p>This is an extremely interesting test. This is an extremely interesting test. This is an extremely interesting test.</p>
     </div>

</div>

这是CSS：

* {
    margin:0;
    padding:0;
}

#headerwrapper {
    margin:0 auto;
    width:630px;    
}

#header {
    width:630px;
    background-image:url(../images/headermiddleback.jpg);
    background-repeat:repeat-x;
}

当我在浏览器中查看它时，我只能看到文本上方只显示了1个背景图像实例。但它并没有重复。

知道我在这里做错了吗？

Answer 1

这是你在jsFiddle上的例子，似乎正在运作。 http://jsfiddle.net/MgvLT/1/

也许你有一些其他的CSS正在进入或者你的背景图像有很多空的空间。请在jsFiddle上发布您的示例。

Answer 2

也许您需要清除您的浏览器缓存？

例如，这是SO Post，显示了如何为Chrome执行此操作。

Answer 3

您可能希望使用repeat-y代替repeat-x

#header {
    width:630px;
    background-image:url(http://dl.dropbox.com/u/4457768/css/headermiddleback.jpg);
    background-repeat:repeat-y;
}

背景图像仅显示一次

3 个答案: