Javascript-форум - Тоже по закрепленный div

Суть вот в чем есть див с фоном который отцентрирован по центру...
начинаю уменьшат окно браузера div остается на месте....отлично
все вроде бы нормально но нет поскольку, размер фонового изображения (контейнера ) задан жестко при уменьшения окно браузера меньше 500 px изображения заходит за кроя.....

как решить это проблему ?

<style>
body {
    margin:0;
    padding:0;
    background: #edebd5;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
	background-image:url(images/fon.jpg);
}
#container {

width:500px; /*Ширина блока*/
height:108px; /*Высота блока*/

[JS]margin:0 auto;
    overflow:visible;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-200px; /*Смещаем блок на половину всей ширины влево*/
    margin-top:-100px; /*Смещаем блок на половину высоты вверх*/
	background-image:url(images/2.png);
}
.main {
    height:100%;
}
.main_in_main {
    height:100%;
}
.content {
    padding-top:0px;
    height:200px;
}
</style>

<div id="container" align="center">
    <div class="main">
        <div class="main_in_main">
            <div class="content">
            </div>
        </div>
    </div>
</div>