CODEWITHSUNDEEP
csshtmlbackground-image
Freesnöw
Freesnöw

Reputation: 32213

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

Upvotes: 1

Views: 2057

Answers (4)

Marcus
Marcus

Reputation: 1232

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

Upvotes: 0

Ryan
Ryan

Reputation: 48

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.

Upvotes: 1

Jamie Dixon
Jamie Dixon

Reputation: 54021

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.

Upvotes: 10

Seth
Seth

Reputation: 6260

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

Upvotes: 1

Related Questions