# Fixed Background Image x2

**URL:** https://forum.kirupa.com/t/fixed-background-image-x2/266872
**Category:** web dev
**Created:** [July 25, 2008, 1:40am UTC](https://forum.kirupa.com/t/fixed-background-image-x2/266872 "2008-07-25T01:40:11Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Adam1](https://avatars.discourse-cdn.com/v4/letter/a/7ba0ec/32.png) [@Adam1](https://forum.kirupa.com/u/Adam1)
#### Post date: [July 25, 2008, 1:40am UTC](https://forum.kirupa.com/t/fixed-background-image-x2/266872/1 "2008-07-25T01:40:11Z")

</div>

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](http://www.pizzasheep.com/byronNew/index5.html)

The CSS I have is:

```auto

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:

```auto

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.

---

<div class="post-metadata">

### Author: ![Adam1](https://avatars.discourse-cdn.com/v4/letter/a/7ba0ec/32.png) [@Adam1](https://forum.kirupa.com/u/Adam1)
#### Post date: [July 27, 2008, 6:02pm UTC](https://forum.kirupa.com/t/fixed-background-image-x2/266872/2 "2008-07-27T18:02:31Z")

</div>

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