Fill a column with a background.

Discussion in 'CSS' started by rpain, Jul 18, 2008.

  1. #1
    Hi - I've got a layout which is being fairly stubborn:

    http://www.themanthatcan.com/acutest/index.php?ID=1

    All I want is that cube on the left to stay at the bottom and the background to be that purple colour all the way down. The height of the whole window will vary. I've tried as much as I can with no luck (already spent 3 enenings on it...).

    Help!

    Thank you,

    Richard
     
    rpain, Jul 18, 2008 IP
  2. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here's my suggestion.
    1. Create a container div around the entire site except the cube background.
    2. Create another div below the container. Set the cube as backgroud image, or just place an image in it. Make it the appropriate width and high and use the margin-top: -200px; code.

      This will ensure that the cube will always be at the bottom. Replace 200px with the height of the cube background image.
    3. You can put a background image on the container div.

      The background should essentially be a snapshot of your sidebar, repeated on the X axis and set to the left.

    Let me know if this doesn't make any sense. It's a bit tricky to explain without showing you.
     
    steelfrog, Jul 18, 2008 IP
  3. rpain

    rpain Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,

    Thanks for that idea - there are so many ways to skin a cat but I hadn't thought of that one. I'm nearly there:

    http://www.themanthatcan.com/acutest/index2.php?ID=1

    Firefox works a treat but the image of on top of everything in IE. I've tried fiddling with the z-index but haven't had any luck.

    Richard
     
    rpain, Jul 21, 2008 IP
  4. rpain

    rpain Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi - does anyone have any ideas? I hate browser incompatibilities...

    Many thanks,

    Richard
     
    rpain, Jul 24, 2008 IP
  5. rpain

    rpain Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    No worries - just managed to fix it. All I did was make the first of the two site blocks have position: relative; and it seemed to then sit on top of the side box image. Thanks for the first idea steel frog - I may be in touch with you in the future with some paid work.

    Phew...
     
    rpain, Jul 24, 2008 IP