#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    UK
    Posts
    119
    Rep Power
    12

    Complex backgrounds with css


    I would like to do the following on a web page but not sure how. Tried a few things but it didnt display what I was hoping for...

    I want essentially a 3 layered background image.
    The main background is one image that is tiled in all directions
    The second image is tiled in x but attached to the top of the screen
    The third image is the same as the second image but attached to the bottom of the screen.

    Over the top of this I want to use html tables and have the background displayed through the empty table cells. Is this possible? Any help appreciated
  2. #2
  3. Twilight Thinking
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2003
    Location
    Oxford UK
    Posts
    656
    Rep Power
    38
    Is the following any help:

    Code:
    <style type="text/css">
    <!--
    
    body {
    margin: 0px;
    background: url(images/bg1.gif) repeat;
    }
    
    #top {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 40px;
    width: 100%;
    background: url(images/bg2.gif) repeat-x;
    }
    
    #bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 40px;
    width: 100%;
    background: url(images/bg3.gif) repeat-x;
    }
    
    #main {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    border: 1px solid #000000;
    }
    
    -->
    </style>
    
    
    
    and:
    
    
    <body>
    
    <div id="top">
    TOP
    </div>
    
    <div id="bottom">
    BOTTOM
    </div>
    
    <div id="main">
    MAIN
    </div>
    
    </body>
    Cheers,
    Dusk

    My portfolio
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    UK
    Posts
    119
    Rep Power
    12
    Apart from the #main div id thats exactly what I had already but the background wasnt showing through the table... in fact I'm not sure the background was showing at all to be honest but I will try that and see what happens
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Location
    UK
    Posts
    119
    Rep Power
    12
    hey it worked Thanks very much

IMN logo majestic logo threadwatch logo seochat tools logo