Fixed Background Image x2

[Adam]

First of all, I'm VERY new to CSS. I'm trying to make my first CSS layout, and I'm having an issue. My first issue was trying to make two different background images - one that stays to the left and one that stays to the right. After a lot of searching, reading and trying I got it. Now my problem is, I want them to be fixed (not scroll with the rest of the page). It works fine in everything except IE. I'm not sure if I'm doing something wrong of if it's just an IE thing. Any help or insight would be great. Here's the page layout right now:

http://www.pizzasheep.com/byronNew/index5.html

The CSS I have is:



body {
margin:0;
padding:0;
border:0;
background:#fff;
min-width:600px;
background-color: #CAC8B5;
background-attachment: fixed;
padding:0px;
color: #000000;
}


#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}

#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}

#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}

#header ul li a:hover {
color:#DFE8A4;
}

#header ul li a.active,
#header ul li a.active:hover {
color:#DFE8A4;
font-weight:bold;
}

#header ul li a span {
display:block;
}

#container {
width:600px;
margin:0 auto;
padding:0 13px;
position:relative;
color:#000000;
text-align:left;
}

a {
font-size: 16px;
font-family: Arial;
font-weight: bold;
color:#ffffff;
}

#main1 {
margin:0; padding:0;
background:url("bgl.jpg") top left repeat-y;
background-attachment: fixed;
height: 1000px;
}

#main2 {
margin:0; padding:0;
background:url("bgr.jpg") top right repeat-y;
background-attachment: fixed;
height: 1000px;
}

.column-in {
margin:0; padding:0.5em 1em;
}

a:link {
color: #000000;
text-decoration: underline;
}

a:visited {
color: #000000;
text-decoration: underline;
}

a:hover {
color: #ffffff;
text-decoration: underline;
}

a:active {
color: #000000;
text-decoration: underline;
}

.styletexttest {
font-size: 16px;
font-family: Arial;
font-weight: bold;
text-align:justify;
line-height: 120%;
margin-top:30px;
margin-bottom:30px;
}


#main1 & #main2 have this:



margin:0; padding:0;
background:url("bgl.jpg") top left repeat-y;
background-attachment: fixed;
height: 1000px;


which seems to me like it should work, but like I said I'm VERY new to this. Any thoughts? Thanks for your help.

[Adam]

Does anyone know if this is even possible? Maybe what I'm trying to do just can't be done in IE. Like I said, I'm really new to this. If anyone can tell me if this is possible, I don't mind at all continuing to work on the solution myself, I just don't want to spend more hours on it if it simply can't be done. Thanks :)

[redelite]

IE6 doesn't like position:fixed; ... however, here's a workaround that I found..

http://divinentd.com/experiments/emulating-position-fixed.html

[Adam]

Thanks! I'll look into this when I get in from work! Thanks for the help :)

[Adam]

Just wanted to say it worked like a charm :thumb: Thanks once again for your help :)