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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2004
    Location
    South Midlands
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Can't get a fixed background-image in IE!

    I've been playing with the imagery on http://www.memoriesforyou.co.uk. The code should have stayed the same, but I wanted a couple of nice images instead of a blocky brown front page.

    But although my page looks right in NS7 (although the cork is too high. It's a child only of <body> so I can't understand why it's not at the bottom!) and the images scroll, the opposite is true in IE6 - the cork's in the right place, but the images don't scroll.

    Can someone please put me out of my misery? I was hoping to get this fixed just right before end of the working day!

    Code:
    HTML
    
    <body>
    <div id="titleimage"></div>
    <div id="cork"></div>
    </body>
    
    CSS
    
    body		{background-image: url(Images/speckles.jpg);
    		 background-repeat: repeat;
    		 background-attachment: fixed;
    		 z-index: 50}
    
    div#titleimage	{position:absolute;
    		 top:0px;
    		 margin-right: 0px;
    		 margin-top: 0px;
    		 right: 10px;
    		 height: 305px;
    		 width: 250px;
    		 background: url(Images/champagneglassestrans.jpg) no-repeat top right fixed;
    		 z-index: 100}
    
    div#cork	{position: absolute;
    		 margin-left: 0px;
    		 background-image: url(Images/champagnecork.jpeg);
    		 margin-bottom:0px;
    		 left:0px;
    		 bottom:0px;
    		 background-repeat: no-repeat;
    		 width: 300px;
    		 height: 300px;
      		 background-attachment: fixed;
    		 z-index: 50;}
    And is our future wounded by Philosophies our daddies had?
    - - Alisha's Attic - -

  • #2
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    IE doesn't support background-attachment: attached. The only possible way of achieving this affect would be to create a 100% width and height div, make sure it's behind all other elements, and fix position it, and set the background-image to whatever you want.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Specifically, IE/Win doesn't support background-attachment:fixed on any element other than the BODY tag. That means no divs, h-anythings, or any other element.

  • #4
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It supports it on BODY? Well, there's an easy solution!
    Code:
    body { background: #fff url(image.jpg) no-repeat fixed }
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #5
    New Coder
    Join Date
    Jan 2004
    Location
    South Midlands
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've tried to reply twice, but my replies are being eaten. Don't know how the last one disappeared - the one before was due to a crash. Anyway, I've decided I've more or less got it how I want it. The position of the cork is being distorted by the box #left, so I may play with it some more but it still looks OK.

    Thanks for both your help.
    And is our future wounded by Philosophies our daddies had?
    - - Alisha's Attic - -


  •  

    Posting Permissions

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