Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Annoying repeating background in DIV issue

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hey yeh,

    it's:

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

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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks, the ../ worked this time. I swear i tried that and it didn't work before!!!

    How odd.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •