background-repeat: repeat y not working properly

[AdRock]

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;
}

[AdRock]

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

[moojoo]

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

[karinne]

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

[Ryan Fait]

Haha, I have to add:

Code: Select all

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

[moojoo]

Oh it all works the same people! heh.

[karinne]

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

[Ryan Fait]

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

[karinne]

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

[moojoo]

I am flawless.

[Ryan Fait]

*Hands moojoo a cookie.

[moojoo]

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

[Ryan Fait]

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