背景不适用于div

时间:2011-05-19 17:15:12

标签: css html background-image

我有以下HTML:

<html>
    <head>
        <title>
            Think in a NEW BOX.
        </title>

        <link rel="stylesheet" type="text/css" href="styles/default.css" />
    </head>
    <body onload="">
        <div id="content">
            <div id="header">
                <img src="images/title-1.png" /><img src="images/title-2a.png" /><img src="images/title-3.png" /></div><div id="fcontent">
                hi
hi
            </div>
        </div>
    </body>
</html>

...以及以下CSS:

div#fcontent{
        background-image:url('images/forground.png');
        width:100%;
        padding:0px;
        margin-top:0px;
        background-repeat:repeat-y;
    }

我的背景没有出现,为什么会这样?

以下是所有CSS,以防万一(问题可能在上面的CSS片段中):

html, body {
        background-color:black;
        font-family:"arial bold";
        overflow:auto;
        text-align: center; 
        display: inline-block;
        color:white;
    }
div#content {
        width:792px;
        height:100%;
        padding:0px;
    }

div#header  {
        height:216px;
        width:100%;
        padding:0px;
        margin-bottom:0px;
    }

div#fcontent{
        background-image:url('images/forground.png');
        width:100%;
        padding:0px;
        margin-top:0px;
        background-repeat:repeat-y;
    }

*           {
        -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
    }

4 个答案:

答案 0 :(得分:10)

请记住,图像的路径是相对于CSS文件的,因此如果您的CSS文件位于“样式”文件夹等中,则当前请求的图像必须位于/styles/images/forground.png.

如果您将网址的位置更改为绝对网址(例如从根网址),则可以避免此类问题。

url('/images/forground.png');

或者你可能想要跳出当前文件夹然后进入images文件夹:

url('../images/forground.png');

希望有所帮助。

答案 1 :(得分:1)

我没有看到ID为fcontent的DIV可能是第一个问题。

答案 2 :(得分:1)

我只是粘贴了你的代码,它适用于chrome和firefox。

确保您的图片路径正确无误,并且您可能需要尝试设置高度。

答案 3 :(得分:0)

注意,这是根路径:

url('/images/forground.png');

始终参考:www.yoursite.com/images/forground.png

虽然这是相对路径,您通常应该使用它:

url('images/forground.png');
url('../images/forground.png');

有关详细信息,您可以查看以下主题:Background not working for a div as it should