background-repeat: repeat y not working properly

I have a background image which is a shadow either side of the page content.

At the moment I have it set so the height is 100% but when i scroll down the page, the background image is no longer there. If i delete the height property the nackground image dissappears altogether.

How can I repeat the image so that it repeats as long as there is page content?

Code: Select all

 
#content {
   position: relative;
   margin: 0 auto;
   width: 841px;
   height: 100%;
   background-image: url(bg1.gif);
   background-repeat: repeat-y;
   text-align: left;
}

I have fixed it now by moving to background image property to the body tag and positioning to image to center

background: #FFF url("foo.jpg") center top repeat-y;

__________________
I hate IE 6. Just sayin....
http://www.mevans76.com

Actually it's more like

Code: Select all

background:color image repeat attachment position;

so...

Code: Select all

background: #FFF url("foo.jpg") repeat-y center top;

Proper CSS Shorthand
Efficient CSS with shorthand properties

Haha, I have to add:

Code: Select all

background: #fff url(foo.jpg) repeat-y 50% 0;

Oh it all works the same people! heh.

__________________
I hate IE 6. Just sayin....
http://www.mevans76.com

My version and Ryan's yes ... but not yours in certain browsers

I believe Safari 1 had problems with it, but that's all history now.

I think it happened a few time that IE5.5 was wonky on me with that. But ... not all the time.

I am flawless.

__________________
I hate IE 6. Just sayin....
http://www.mevans76.com

*Hands moojoo a cookie.

Speaking of.. Girl Scout Cookies... So good but oh so evil.

__________________
I hate IE 6. Just sayin....
http://www.mevans76.com

I agree. The chocolate covered peanut butter cookies are more addicting than heroin.