Background problem in low resolutions

[nihalz]

Hi

I use an image whose width is 640px as a background using CSS...The image repeats itself vertically, and is positioned in the center.....
Everything looks fine if the browser's width is 640 or more..

But when i resize my browser window to less than the width of the background image, the background appears to shrink in width....so the content overlaps the background image....like this:

http://i10.tinypic.com/6f95fuh.jpg

Is there any way to prevent this? What am I doing wrong?
Here is my CSS code for the background:


body {background-color:#e8e8e8;background-image:url(bg3.gif); background-repeat:repeat-y;background-position: top; width:100%; height:95%;
}

BTW, this happens in Firefox & Opera...IE does not give me that problem...

[Veronica]

The image shouldn't change size when you re-size the browser window. The content will shift over it, and you'll see less of it, but the image itself should stay the same in all the browsers. Can you post a link to the site where it's happening?

[nihalz]

Thanks for replying.
Sorry, but the website is internal and not made public yet..
I can send you a saved web page, if that will help.
And I don't know if the image is ACTUALLY changing size or not, but it appears to me that it does, as you can see from the picture.

Thanks!

[Veronica]

The content can move when you resize the browser window, independent of the background image. So if you're using the background image to divide the main content from, say the side navigation content, it won't work.
If that's the effect you were going for, instead give each div it's own background image. That way, as the page re-sizes, the div's content and its background will still stay together.

[liam77]

Hi
But when i resize my browser window to less than the width of the background image, the background appears to shrink in width....so the content overlaps the background image....like this:


Can you set a width for your page, or the wrapping div (if you have one) to 640px?


Liam.

[nihalz]

Thanks for the replies...
So I tried putting all my content inside a div, and giving it a background image...
Now the problem is gone.

But now I have another one. If I wrap the body in a div, the background image doesn't cover the whole height of the page.

In every browser, there is some amount of space, both at the bottom and the top of the page, which dose not get covered by the image.

Any ideas why this is happening?

http://i17.tinypic.com/6ft5yjp.jpg