@@Andi D.:

nuqneH

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:

Das Muster dient der Verzierung, ist also kein Dokumentinhalt, sondern Hintergrundbild. Wenn du zwei Hintergrundbilder hast, dann brauchst du (noch) zwei verschiedene Elemente dafür:

<div id="picture">  
  <img src="/images/foto.jpg">  
</div>

Das 'img'-Element erhält rechts Padding und darin als Hintergrund den Verlauf (nur vertikal wiederholdend, nicht horizontal) ab Breite des Fotos (800px) beginnend:

#picture img  
{  
  background-image: url(/images/blue-r.png);  
  background-position: 800px top;  
  background-repeat: repeat-y;  
  padding-right: 300px;  
  vertical-align: bottom;  
}

Wegen das Unterlängenproblems im IE wird das 'img' im 'div' unten ausgerichtet.

Das 'div'-Element erhält das andere Muster (horizontal und vertikal wiederholdend), wegen des Anschlusses ab Breite des Fotos zuzüglich des Verlaufs (1100px):

#picture  
{  
  background-image: url(/images/blue.png);  
  background-position: 1100px top;  
  background-repeat: repeat;  
}

Kürzer zusammengefasst:

#picture  
{  
  background: url(/images/blue.png) repeat 1100px top;  
}  
  
#picture img  
{  
  background: url(/images/blue-r.png) repeat-y 800px top;  
  padding-right: 300px;  
  vertical-align: bottom;  
}

Qapla'