Anton: Dehnen und stauchen einer Hintergrundgrafik

Beitrag lesen

Meine Webseite gliedert sich in die DIV-Container header, menue, content und footer. Des weiteren habe ich eine Grafik erzeugt, die eine Breite von 740 Pixeln besitzt. Sie liegt als Hintergrundgrafik hinter dem Header. Der Header enthält des weiteren die Überschrift der Seite z.B. <h1>Überschrift der Webseite</h1>. Die Grafik ist also optional, da die notwendige Überschrift der Webseite auch noch zu sehen ist, wenn jemand in seinem Browser die Grafiken deaktiviert hat. Nun sollte es so sein, das die Hintergrundgrafik immer genau in den verfügbaren Header eingepasst wird. Wenn ich z.B. eine Auflösung von 800 x 600 eingestellt habe, dann soll die Grafik genauso den kompletten Header beanspruchen, als wenn ich eine Auflösung von z.B. 1280 x 768 eingestellt habe. Wenn die Grafik zu klein für den Header ist, dann soll sie entsprechend gestreckt werden, so das sie genau in den verfübaren Headerplatz passt. Wenn die Grafik zu groß für den Header ist, was ja nur möglich ist, wenn die Auflösung unter 800 x 600 Punkten liegt (z.B. bei einem Handy), dann soll sie entsprechend gestaucht werden, so das sie wiederrum genau in den Header passt.

Ist sowas überhaupt möglich? Falls nicht wäre es schön wenn ihr mir ein paar Tipps zur Umsetzung meines Vorhabens geben könntet. Der Header soll eine Hintergrundgrafik besitzen, die sich immer dem vorhandenen Platz anpasst. Die Grafik soll nicht gekachelt werden, sie soll entweder gedehnt oder gestaucht werden.