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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    2 Background Images

    got this small project today and was told it needs to be done by tonight. I'm trying to do some stuff with the background using CSS but i'm having some small problems.

    The site is at
    http://ottawabeachvolleyball.com/index2.html

    StyleSheet is here
    http://ottawabeachvolleyball.com/styles.css

    Intially when it loads it looks fine. But once you scroll, the image of the net scrolls with the page. I want the to stay in the corner all the time.

    I know i'm using tables... what a travesty... blah blah...

    I am trying to switch over to complete css layouts but when projects like this come up, I don't have the time.

    I've tried finding sites that do what I want but I couldn't find anything using 2 background images the way I want.

    Thanks for any help.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Add this to your CSS
    Code:
    html, body {
    height:100%;
    }
    .net {
    position:fixed;
    bottom:0;
    left:0;
    }
    Remove this from your style sheet
    Code:
    .net {
    	position: absolute;
    	z-index: 2;
    	left: 0px;
    	bottom: 0px;
    }
    Then after this
    Code:
    <link href="styles.css" rel="stylesheet" type="text/css">
    add this
    Code:
    <!--[if lte IE 6]>
    <style type="text/css">
    html {
    overflow-x:hidden;
    overflow-y:hidden;
    }
    body {
    overflow-y:auto;
    }
    .net {
    position:absolute;
    }
    </style>
    <![endif]-->
    I hope you don't plan on using absolute or relative positioning for anything else on your page because anything else positioned absolute or relative it will now become fixed in IE meaning it won't scroll with the page. And its not that hard to code your layout without tables either. Basic two column layout, header, left nav, and content. http://bonrouge.com/2c-hf-fixed.php
    Last edited by _Aerospace_Eng_; 05-01-2006 at 10:02 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked wonderfully in Firefox but I'm still having scrolling the problem in IE. Any suggestions?

    And thanks for the link for the CSS layout. I won't be using it on this project but maybe on my next one. I've be learning CSS bit by bit. Basically trying to learn something new with each project.

    My last option is basically to just tile the net image. I just want the effect for my own personal reasons, but if i can't pull it off it won't be the end of the world.

  • #4
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    position:fixed does not work in ie. but you can get it to work kind of by using float.htc here

    http://www.siteexperts.com/ie5/steveg/lpage8.asp

    also see
    http://www.idest.com/csshacks/files.htm


  •  

    Posting Permissions

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