Hallo,
ich verzweifel hier grad (mal wieder) mit CSS.

Folgendes:
Ich habe ein Foto (800x200). Neben diesem Foto soll in der selben Höhe wie das Bild (200px) bis zum rechten Rand des Browsers ein Muster zu sehen sein.

Dieses Muster hat bis 300px einen Farbverlauf, danach kann es sich wiederholen. Ich will also quasi sowas:

Foto - Muster1 - Muster2 - Muster2 - Muster2 .......

Ich will dadurch KEINEN Scrollbar erzwingen. Wenn man nicht alles sieht, ists eben verdeckt. Zieht man das Browser-fenster breiter, wird mehr und mehr aufgedeckt. Ich kriegs einfach net hin :-/

CSS

#picture{  
	float:left;  
}  
  
#blue-bg{  
	background:url(/images/blue-r.png);  
	float:left;  
	height:200px;  
}  

HTML:

<div id="picture">  
    <img src="/images/foto.jpg">  
	</div>  
  
    <div id="blue-bg">  
   	 <img src="/images/blue.png" alt="background" />  
	</div>

blue.png ist quasi Muster1 (mit dem Verlauf) und blue-r ist Muster2. Es klappt, dass man die Verbindung zwischen Muster1+2 nicht sieht, aber ich kriegs nicht hin, dass das Muster IMMER bis zum rechten Fensterrand geht.

Ideen?
Danke!

Andi