Fixed Background Image x2

programming web dev
1

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.

2

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