nicht angemeldet
Dehnen und stauchen einer Hintergrundgrafik
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.
-
Ist sowas überhaupt möglich?
jein - css 2.1 kanns nicht, ab css 3 wirds möglich sein
praktisch als nein
Falls nicht wäre es schön wenn ihr mir ein paar Tipps zur Umsetzung meines Vorhabens geben könntet.
die einzige praktikable möglichkeit die mir momentan einfällt ist es, ein img-element per position: absolute hinter die den header zu positionieren und mit entsprechenden breiten und höhenangaben (in %) zu versehen - allerdings sieht das in vielen browsern kagge aus
firefox skaliert grafiken mittlerweile recht brauchbar, der internet exploder einschließlich version 7 kanns nicht
zudem hast du dadurch gestaltungsinformationen im html, das gehört da nicht hin
die beste lösung ist es imho, sich von diesem "designwunsch" zu trennen und ein kachelbare grafik zu wählen oder eine die einfach "aufhört" wenn das design breiter wird
alternativ kannst du natürlich auch flash verwenden oder javascript ;)
-
1.)
Das heißt also ich lasse besser die Finger davon, bis alle Browser CSS3 unterstützen?2.)
Javascript mag ich garnicht, außerdem besteht ja auch die Möglichkeit, dass Javascript deaktiviert ist.3.)
Mit Flash hatte ich bisher garnichts zu tun. Hab aber nur gutes davon gehört. Kannst du mir vielleicht kurz erklären, wie das vom Grundprinzip her ablaufen würde? Kann ich mir mit Flash eine Headergrafik erzeugen, die sich unabhängig von der Auflösung und unabhängig vom Browser immer korrekt anpasst?4.)
Wie wird denn dieses Problem im kommerziellen Webseiten gelöst. Ich kann mir nicht vorstellen, das die alle einfach nur den Hintergrund kacheln. Verwenden die auch Flash für sowas?-
Wie wird denn dieses Problem im kommerziellen Webseiten gelöst. Ich kann mir nicht vorstellen, das die alle einfach nur den Hintergrund kacheln. Verwenden die auch Flash für sowas?
Du kannst doch eine Grafik nehmen, die fixiert ist (also beim Scrollen nicht mitläuft) und 100% Breite und Höhe des Anzeigebereichs hat.
Okay, der IE6 kanns natürlich wieder nicht richtig, weil er mit dem Scrollbalken einen Teil des Anzegebereiches abdeckt und niemals 100% Breite anzeigt:
http://gewerbe-birkenau.de/satzung.phpKalle
-
-