Dynamisches Hintegrundbild für website

[Gunnar Bittersmann]

@@suit:

nuqneH

Das Hintergrundbild kann problemlos verzerrt werden. Es muss nur immer die volle Breite ausfüllen und die Trennung schwarz/rot genau in der Mitte des Fensters verlaufen.

Das geht auch ohne Hintergrundbild, wenn es nur um zwei farben geht.

Richtig. (Außer in rückschrittlichen Browsern wie IE und Opera.)

Ein Element mit 50 % Breite hinter die anderen Elemente positioniert mit entsprechender Farbe - body oder html bekommen die andere Farbe.

Aber doch nicht so! Ein zusätzliches Element?? Nein danke!

Sondern:

body  
{  
  background: url(red-black.png) repeat-y center;  
  background: -moz-linear-gradient(left, red, red 50%, black 50%, black);  
  background: -webkit-gradient(linear, left center, right center, from(red), color-stop(50%, red), color-stop(50%, black), to(black));  
}

Browser, die immer noch keine Gradienten kennen, bekommen ein hinreichend breites Hinterrgrundbild mittig positioniert.

Browser, die dieses nicht nötig haben, fordern dieses auch nicht an; es wird nicht unnützerweise übertragen.

Qapla'