Annoying repeating background in DIV issue

adamkelly · 06-16-2009, 04:12 PM

Hey guys,

I've coded a background image to repeat in a div 1 million times but I think i'm going mad!

I'm really not sure why it isn't working.

The DIV i'm having a problem with is the one with the ID of #staticnav

Is it possible for someone to take a look and get back to me?

the CSS is:

Code:

body {
    margin: 20px 0px 0px 0px;
    background-color: #FFF;
}

#maincontainer {
    width: 973px;
    margin: 0px;
    padding: 0px;
    margin: 0 auto;
}

#logo {
    float: left;
    width: 403px;
    height: 74px;
}

#minibasket {
    float: right;
    width: 235px;
    height: 74px;
}

#minibasket table {
    width: 225px;
}

.minibasket-price {
    text-align: right;
}

#staticnav {
    clear: both;
    width: 971px;
    height: 27px;
    background-image: url(/images/topnav_bg.gif);
    margin: 0 auto;
    margin: 0px;
    padding: 0px;
}

the HTML is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title>Tools 4 Technology</title>
</head>

<body>

<div id="maincontainer">

    <div id="logo">
        <img src="images/logo.gif">
    </div>

    <div id="minibasket">
        <b>Your Basket</b>
        <table>
          <tr>
            <td>
            Total Items:
            </td>
            <td class="minibasket-price">
            <b>0</b>
            </td>
          </tr>
          <tr>
            <td>
            Total Price Exc. VAT:
            </td>
            <td class="minibasket-price">
            <b>£0.00</b>
            </td>
          </tr>
        </table>
    </div>

    <div id="staticnav">
    Home
    </div>

</div>

</body>
</html>

The document tree is as follows:

index.html
css\style.css
images\logo.gif
images\topnav_bg.gif

abduraooft · 06-16-2009, 04:14 PM

Could you post a link to your page?

adamkelly · 06-16-2009, 04:28 PM

Hey yeh,

it's:

http://www.highriserocks.com/hme/

I've added more since but the DIVs background image still wont show!!

abduraooft · 06-16-2009, 04:31 PM

Quote:

background-image: url(/images/topnav_bg.gif);

should be either

Code:

background-image: url(/hme/images/topnav_bg.gif);

or

Code:

background-image: url(../images/topnav_bg.gif);

PS: make use of firebug, which will make your life a lot easier

adamkelly · 06-16-2009, 04:34 PM

Thanks, the ../ worked this time. I swear i tried that and it didn't work before!!!

How odd.