Резиновый бэкграунд

Как-то встала передо мной задача сделать для сайта резиновый бэкграунд - то есть такой, который меняет размеры под размер окна браузера автоматически.
Сделать это совсем не сложно.
Задумка такова - делаем два слоя с разными z-index, на первом, с меньшим z-index, располагаем фон, на втором слое, который будет сверху, располагаем контент.
Изображение, которое будет фоновым, делаем размером, который, как мы думаем, будет максимальным размером окна. В примере это 1680х1050.
В html это выглядит так:

<div id="page">
<div class="note">Wellcome!</div>
</div>
<div id="fon">
<img src="http://www.blogger.com/bg.jpg" alt="" />
</div>
CSS для первого слоя (бэкграунд):

#fon{
height:100%;
width:100%;
z-index:1;
min-width:1024px;
min-height:768px;
}
#fon img{
height:100%;
width:100%;
position:absolute;
}
CSS для слоя с контентом:

*{margin:0;padding:0;}
html, body{
width:100%;
height:100%;
min-width:1024px;
}
#page{
position:absolute;
top:0;bottom:0;right:0;left:0;
z-index:100;
}
.note{
border:none;
margin:0px;
width:100%;
float:left;
min-height:400px;
height:auto !important;
position:relative;
color:#FFFFFF;
font-size:20px;
font-family:Tahoma;
}
Пример можно посмотреть тут: http://wsite.in.ua/files/index.htm