CSS and image positioning

[K. Tsang]

Hello I have 2 images in the css file using id (eg #xx{...})

The images are set as backgound images, one to the left and the other right at the top of the page. Now when I resize the browser window to something smaller, the right image shifts with the browser covering the left image/content on the page.

What should I use to make sure it stays where it should when browser resizes?

  
#header
{
    background-image:url(../images/logo.gif);
    background-attachment:scroll;
    background-repeat:no-repeat;
    background-position:left top;
    height:124px;
}
 
#advert
{
    background-image:url(../images/ad.jpg);
    background-attachment:scroll;
    background-repeat:no-repeat;
    background-position:right top;
    height:124px;
}
 
 

HTML code:
<div id='header'><div id='advert'></div></div>
[ August 07, 2008: Message edited by: K. Tsang ]