Hintergrundbild abhängig von der verfügbaren Breite

[Orlando]

Hallo D.R:,

theoretisch könntest du ja auch ein normales Bild für deine Seite einfügen, das auf 100% skalieren und dann ein absolut positioniertes Div drüber packen, das ebenfalls 100% in höhe und Breite einnimmt. Das du dann aber kaum Gestaltungsmöglichkeiten mit CSS hast ist fraglich, ob das so eine gute Idee ist.

Schlimmer noch ist, was Browser mit Bildern anstellen, die sie skalieren. Von einem optisch brauchbaren Ergebnis kann leider keine Rede sein. Doch CSS3 bietet (voraussichtlich) eine Alternative: Media Queries. Ein Beispiel könnte folgendermaßen aussehen:

  
/* Allgemeines Hintergrundbild */  
  
@media screen {  
  body { background-image:url(bg.png); }  
}  
  
  
/* Hintergrundbild für eine Breite von 600 bis 700 Pixel */  
  
@media screen and (min-width:600px) and (max-width: 700px) {  
  body { background-image:url(bg-600.png); }  
}  
  
  
/* Hintergrundbild für eine Breite von 701 bis 800 Pixel */  
  
@media screen and (min-width:701px) and (max-width: 800px) {  
  body { background-image:url(bg-700.png); }  
}  
  
/* usw. usf. */  

Umgesetzt werden Media Quereis derzeit lediglich von Opera. Bis eine breite Browserunterstützung gegeben ist, wird man wohl weiterhin auf JavaScript-Lösungen aufbauen müssen.

Grüße
 Roland