How to made my background image strech if I dynamicaly insert DIV in the middle of the page

I have a background image which I apply to the body. The image is only in the bottom and stretch to the entire width of the page. The image is 1 X 320 px.

body {
    background-image: url("../images/bg-main.gif");
    ba开发者_Go百科ckground-position: 0% 100%;
    background-repeat:repeat-x;
}

The rest of my web site is in 1024 X 768 resolution.

It works perfectly until I dynamically insert a new DIV in the middle of the page using javascript. It cause the browser scroll bar to appear and when I scroll down to the bottom, I can see the image stopping right at it's original position.

How can I make my image get down again without reloading the page ??? I'm using the EXTJS framework to avoid reloading the page...

Thanks Alain

im guessing this is IE only, try:

background-position: 0 bottom;

if my understanding of "The image is only in the bottom" is correct

if that fails causing hasLayout on the body might work, try combinations of

body
{
    width: 100%;
    position: relative;
}