Heute will ich mal erklären, wie man in HTML Seiten ein Hintergrundbild zentriert ausrichten kann. Bei
www.quakewarsforum.de kann man schön sehen, dass wir ein Hintergrundbild verwenden:
http://www.quakewarsforum.de/forum/temp ... ground.jpg
Wenn man sich nun das Pic ansieht, kann man erkennen, dass es mit 1680x15 Pixeln viel breiter ist als die meisten Bildschirme. Trotzdem passt der dunkle Streifen in der Mitte des Bilds perfekt in die Mitte. Wie geht das?
Die entscheidende Stelle im Code lautet:
Besonders der Part ab "style" ist interessant. Hier definiere ich zunächst als Hintergrundfarbe ein dunkles Grau (666666) und dann nehme ich das Bild und positioniere es mit "center" und "top" in der Mitte und ganz oben. Da sich das Bild standardgemäß wiederholt wird es nach unten hin vervielfätigt und füllt so den gesamten Screen aus.
Man kann die Wiederholdung auch verhindern:
Hier verhindern "no-repeat" und "fixed" die Wiederholdung des Hintergrundbilds. Dazu muss dann aber das Pic so gross sein wie der ganze Bildschirm sonst funktioniert es wieder nicht. Hierbei muss man dann noch bedenken, dass die Screens immer weiter in die Breite gehen. Mittlerweile sind Auflösungen bis zu 1680 Pixeln (breite) einstellbar.
Grüße
KK
