...

View Full Version : Can't get a fixed background-image in IE!



Gabrielle
02-27-2004, 04:25 PM
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!



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;}

me'
02-27-2004, 05:06 PM
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 (http://devnull.tagsoup.com/fixed/), and set the background-image to whatever you want.

Skyzyx
02-28-2004, 06:09 AM
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.

me'
02-28-2004, 09:46 AM
It supports it on BODY? Well, there's an easy solution!
body { background: #fff url(image.jpg) no-repeat fixed }

Gabrielle
02-28-2004, 03:27 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum