background-attachment IE probs

richcleverley · Oct 16, 2006

Hi all,

Playing around with some ideas inspired by various other sites.

I want a fixed background in a container div and it works fine in FF but of course IE won't have it. I know it's a ducumented bug in IE where if background-attachment:fixed; is applied to anything but the body it doesn't like it but I was wondering if anyone knows how to get around it.

Here's my code

Code:

CSS

body {
background-color:#292421;
}

.maincontent{
background-image:url('ariel.jpg') ;
background-attachment: fixed;
margin: 0 auto;
width:360px;


border:solid 1px #FFCC00;
}
.boxcontent{
padding:2px;
width:354px;
height:200px;
background-color:#FFFFFF;
margin-bottom:30px;
border:solid 1px #FFCC00;

}
#container{				

width: 703px;

position: absolute; left: 50%;

background: transparent url(bg-bio.gif) no-repeat 0px 50px;

margin-left: -352px;}

Code:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<div class="maincontent">
 <div class="boxcontent">
 </div>
 <div class="boxcontent">
 </div>
 <div class="boxcontent">
 </div>
 <div class="boxcontent">
 </div>
</div>
</div>
</body>
</html>

Very basic code for the moment but it's just an idea for future projects I want to get working.

Thanks in advance,

Richard

Vragabond · Oct 16, 2006

I actually had fixed background working both in IE and FF. The difference was that in FF the background was fixed to the viewport (regardless of the element it lay in, it was being positioned according to the 0,0 of the viewport) whereas IE rendered 0,0 according to the top left edge of the container.

That said, I do not understand why you're using absolute positioning where there's no need for it. It would be much more predictable and easier to work with normal document flow.

I would also suggest you create an online example of this, because we cannot easily reproduce the code without having the background image.

richcleverley · Oct 16, 2006

Hi Vragabond,

Yes, you are right about the absolute positioning, I've changed it now but obviously the IE problem still exists.

Here's a link to the test page:

http://www.ictechnology.net/csstest/test1

I know the images are well dodgy, just there to try out the idea.

Thanks,

Richard

richcleverley · Oct 16, 2006

Oh, and are you using IE6 or 7. IE6 is what I use at the moment and it doesn't seem to work for me.

Don't know if IE7 has sorted this out or not.

Richard

richcleverley · Oct 17, 2006

Finally got it working,

The background image was set as a background to a container, but if I set it as a positioned background to the body it works.

I then set position the container so it shows over the background image and all's fine.

Thanks Vragabond for getting me thinking.

Richard

richcleverley · Oct 17, 2006

Oh, and the absolute positioning on the container seems to need to be there to keep everything together when you resize the window.

Richard

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

background-attachment IE probs

richcleverley

MIS

Vragabond

Programmer

richcleverley

MIS

richcleverley

MIS

richcleverley

MIS

richcleverley

MIS

Similar threads

Part and Inventory Search

Sponsor