резиновость шапки.

Здравствуйте.
сутки просидел, но ничего не вышло.

Шапка состоит из двух картинок - левая и правая, при растягивании средняя часть шапки репеатится пнг-шным изображением. При ратягивании все работает отлично, при сжатии происходит наложение левого рисунка на правый.
Каким образом сделать так что бы при сжатии, когда левый рисунок достигал правого - правый исчезал и на его место вставал однотонный вышеуказанный репидный рисунок.

код такой:
indexphp

Код (html):

1. <div id="header">
2.             <jdoc:include type="modules" name="top" style="afterburner" /> 
3. <div id="topp"><img id="head1" src="/images/1.png"><img id="head2"src="/images/2.png"><a href="/" class="topp"><h1>название сайта</h1></a><h2>Описание сайта</h2></div>          
4.            
5.         </div>

stylecss

Код (html):

1. #head1{left:-2px;z-index:2;}
2. #head2{right:0px;z-index:1;}
3.  
4. #head1, #head2 {position:absolute; }
5. #header {overflow:hidden; margin:-12px 10px 10px 10px;background:url(/images/bg.png) repeat-x;position:relative; height:150px; border-radius: 0 0 17px 17px;}