SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict manipura's Avatar
    Join Date
    Apr 2001
    Location
    Calgary,AB
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Problem

    at iclypsis.com I have the two side's for the bg. But they are just
    images sitting there. The thing I'm trying to do is make those the
    same size as the whole page. If you shrink the page down so that
    you have to scroll to look down the page, you'll see that the two
    side panels are only the size of the window, not the page.

    Code:
    #backgroundleft { 
      background: url(images/fx_left.gif);
      position: absolute; top:0px; left:0px; height:100%; width:158px; z-index: }
      #backgroundright { 
      background: url(images/fx_right.gif);
      position: absolute; top:0px; right:0px; height:100%; width:158px; z-index:}
    Anyone have any ideas?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Put one image in the body background and repeat it. then enclose the whole page in another element with 100% height so that it always gets stretched.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Iclypsis Communictations</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash mav hiding hack \*/ 
    html {height:100%;} 
    /* end hack */ 
    html, body {
    margin:0;padding:0;
    scrollbar-face-color:black;
    scrollbar-highlight-color:white;
    scrollbar-3dlight-color:black;
    scrollbar-darkshadow-color:white;
    scrollbar-shadow-color:black;
    scrollbar-arrow-color:white;
    scrollbar-track-color:white;
    background: url(http://www.iclypsis.com/images/fx_left.gif) repeat-y left top;
    }
    body {height:100%}
    #backgroundright { 
    min-height:100%;
    background: url(http://www.iclypsis.com/images/fx_right.gif) repeat-y right top;
    }
    * html #backgroundright { height:100%}
    
    #img1 { position: relative;  text-align: center }
    a#button1 {float:left; width:40%; margin:60px 0;z-index:3;position:relative;display:inline; text-align:right;}
    a#button2 {float:right;width:40%; margin:60px 0;z-index:3;position:relative;display:inline;text-align:left;}
    a#button3 {float:left; width:40%; margin:60px 0;z-index:3;position:relative;display:inline; text-align:right;}
    a#button4 {float:right;width:40%; margin:65px 0 55px 0;z-index:3;position:relative;display:inline;text-align:left;}
    
    h1 { position: relative; bottom:15px; color: black; 
    font-size: 13px; font-family: Arial; text-align: center }
    h2 { position: relative; color: black; 
    font-size: 13px; font-family: Arial; text-align: center;clear:both }
    p.allied { position: relative; color: black; 
    font-size: 13px; font-family: Arial; text-align: center;
    clear:both;margin:0;font-weight:bold}
    
    </style>
    </head>
    <body>
    <div id="backgroundright"> 
      <!-- must surround whole page -->
      <div id="img1"><img alt="" src="http://www.iclypsis.com/images/logo.gif" /></div>
      <h1>Manufacturer of VOIP Processsing, Billing, and Call Accounting Software.</h1>
      <a id="button1" href="#"><img alt="" src="http://www.iclypsis.com/images/button01.gif" border="0" /></a> 
      <a id="button2" href="#"><img alt="" src="http://www.iclypsis.com/images/button02.gif" border="0" /></a> 
      <p class="allied">Allied with:</p>
      <a id="button3" href="#"><img alt="" src="http://www.iclypsis.com/images/logo_webnet.gif" border="0" /></a> 
      <a id="button4" href="#"><img alt="" src="http://www.iclypsis.com/images/logo_enertiasoft.gif" border="0" /></a> 
      <h2>Phone: (403) 243-6688 - Fax: (403) 287-0246 - Email: Customer Care / Business 
    	Support</h2>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
      <p>some text to make page scroll</p>
    </div>
    </body>
    </html>
    I've tidied your code up a bit as you had some weird stuff going on in there. Don't position using relative positioning otherwise you will leave gaps all over the page.

    Relative positioning moves ans element in relation to itself but the space it previously occupied is preserved.

    Hope that helps.

    Paul

  3. #3
    SitePoint Addict manipura's Avatar
    Join Date
    Apr 2001
    Location
    Calgary,AB
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You Very Much! That was much more than I expected.

    I have this web developer that likes to do everything he can
    in css. The thing is, he's not that good at css. Neither am I.
    I just have to teach him some HTML. Then I hope he can do
    something I can use.


Bookmarks

Posting Permissions

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