CSS background issue.

Discussion in 'OT Technology' started by cedric, Jan 25, 2005.

  1. cedric

    cedric I don't have a contract

    Joined:
    May 9, 2004
    Messages:
    88,516
    Likes Received:
    1
    Location:
    San Francisc:noes:
    I'm having problems with a vertically repeating background using CSS. What's suppose d to happen, is the background image should repeat vertically down the browser. What actually happens is that it only repeats for the height of the browser window at the time. example: if the browser window is 800px, it'll repeat for that 800px, but if I scroll down beyond that 800px it won't repeat anymore. Everything beyond that 800px will be blank. Any ideas? Here's the style.

    #container {
    position: relative;
    height: 100%;
    text-align: center;
    margin: 0px auto;
    padding: 0px;
    width: 800px;
    bottom: 0px;
    background: #B3C9FF url(home-back.jpg) repeat-y;
    }
     
  2. Juvenall

    Juvenall What Would Juvie Do?

    Joined:
    Dec 31, 2004
    Messages:
    2,221
    Likes Received:
    0
    Location:
    #!/usr/bin/Detroit
    Could you please post a link or the source for the page in question?
     
  3. cedric

    cedric I don't have a contract

    Joined:
    May 9, 2004
    Messages:
    88,516
    Likes Received:
    1
    Location:
    San Francisc:noes:
    (keep in mind the indents were taken out by the msg. board.)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="styles.css" rel="stylesheet" type="text/css">
    </head>

    <body id= "body">
    <div id="container">
    <div id="navigation_main"></div>
    <div id="banner"></div>
    <div id="text_main">
    <h3><span></span></h3>
    <p class="p1"><span></span></p>
    <p class="p2"><span></span></p>
    <p class="p3"><span></span></p>
    <p class="p4"><span></span></p>
    </div>
    <div id="right_text_box">
    <h3><span>upcoming</span></h3>
    <p class="p1"><span></span></p>
    <p class="p2"><span></span></p>
    </div>
    <div id="navigation_bottom"></div>
    </div>
    </body>
    </html>
     

Share This Page