Background not working for a div

问题

I have the following 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>

...and the following CSS:

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

My background isn't showing up, why is this?

Here is ALL of the CSS, just in case (the problem is probably in the CSS snippet above, however):

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;
    }

回答1:

Remember that the path to the image is relative to the CSS file so if your CSS file is in a "styles" folder etc, the image currently being requested must be located in /styles/images/forground.png.

If you change the location of the url to an absolute URL such as from the root, then you can avoid this kind of problem.

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

alternatively you might want to jump out of the current folder and then into the images folder:

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

Hope thant helps.

回答2:

I'm not seeing a DIV with the ID fcontent that could be the first issue.

回答3:

I just pasted your code and it works for me in chrome and firefox.

Make sure your path to the image is correct, and you may want to try setting a height.

回答4:

Pay attention, this is the root path:

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

Always referring to: www.yoursite.com/images/forground.png

While this are relative paths, which you should normally use:

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

For more information you may look into this thread: Background not working for a div as it should

来源：https://stackoverflow.com/questions/6062336/background-not-working-for-a-div

标签

css

html

background-image