Question

我一直有一个奇怪的CSS问题，试图重复一个图像标题，由于某种原因它不起作用，这是代码，我做错了什么？

body {
    background:url(images/bg.png) repeat 0% 0%;
    font-family: 'Helvetica Neue', Arial, Verdana, sans-serif;
    margin: 0;
        padding: 0;
}
/* this part is not working its only showing the header in its original size I am trying to make it repeat*/

#header {
    width: 100%;
    background: url(header.png) repeat-x;
    height:44px;

}

HTML:
<div id="wrap">
    <div id="header">



    </div>
    </div>

Answer 1

这是你的道路。您的header.png与CSS文档在同一路径中吗？

如果没有，请使用相对路径，例如：

width: 100%;
background: url(../header.png) repeat-x;
height:44px;

为图片所在的每个子文件夹添加../。

Answer 2

试

#header {
    width: 100%;
    background: url(header.png) repeat-x;
    height:44px;
    display:block
}
#wrap {
    width: 100%;
    display:block
}

但是..我在小提琴上测试了你的原始代码（用另一个图像）并且它运行良好，可能问题不在#header中，可能问题在于另一个具有另一个宽度的元素。

Answer 3

您可能正在尝试调整内联元素的大小。尝试添加此参数 - display：block

编辑：我看到你正在使用div，忽略我之前的回答。

Answer 4

在这里工作正常

http://i51.tinypic.com/2ds1ele.jpg

Answer 5

看看这个小提琴：http://jsfiddle.net/ksCnL/

这是您的代码，但图像路径正确。如果header.png位于父目录中，请使用url('../header.png');。如果它位于图片文件夹中，请尝试url('../images/header.png');或url('/images/header.png');。

查找文件位置并修复路径。

奇怪的CSS问题

5 个答案: