Clever Geek Handbook

Background doesn't work for 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 is not showing, why is this?

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

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


source to share


4 answers


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

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

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


alternatively, you can navigate from the current folder and then to the images folder:

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

Hope it helps.

+10


source


I don't see a DIV with an ID fcontent

that might come first.



+1


source


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

Make sure your image path is correct and you can try setting the height.

+1


source


Note, this is the root path:

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

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

For now, these are relative paths you should normally use:

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

For more information, you can look at this thread: Background doesn't work for div as it should

0


source






More articles:


All Articles