Hintergrundbilder mit verschiedenen Auflösungen?

[Manus]

Hi,
Ich suche nach einer Möglichkeit ein Hintergrundbild in eine Seite einzubinden, welches je nach Auflösung des Nutzers die größe ändert, so das es immer den kompletten Bildschirm ausfüllt.
Am besten wäre eine Lösung in PHP.
Wenn da jemand was weiß wäre ich dankbar.
Manus

[Tim Tepaße]

Hallo Manus,

Ich suche nach einer Möglichkeit ein Hintergrundbild in eine Seite
einzubinden, welches je nach Auflösung des Nutzers die größe ändert, so das
es immer den kompletten Bildschirm ausfüllt.

Fände ich schrecklich. Ich habe ein recht große Bildschirmauflösung, also
genug Platz auf dem Bildschirm und habe das Browserfenster immer nur so
groß, wie ich für ein angenehmes Lesen des Inhaltes brauche. Da kann es
auch gut passieren, daß ich das Fenster verkleinere, weil ich gerne eine
maximale Zeilenlänge beim Lesen habe. Und nun willst Du meinen kompletten
Bildschirm ausfüllen, den ich doch so gerne selbst mit irgendwelchen Fenstern
füllen will? Un-ver-schämt!   ;-)

Was Du meinst, ist die Größe der Anzeigefläche, die ja nicht mit der Größe
des Browserfensters identisch ist. Und das ist ja auch genehm für so komische
Tims, die die Größe ihres Browserfensters andauernd verändern.

Aber es klappt nicht:

Beide Möglichkeiten zur Angabe eines Hintergrundbildes bieten keinerlei
Möglichkeit ein Hintergrundbild zu strecken bzw. zu stauchen:

HTML (eh veraltet):
  http://selfhtml.teamone.de/html/dateiweit/hintergrundbild.htm
CSS:
  http://selfhtml.teamone.de/css/eigenschaften/hintergrund.htm

Du könntest natürlich eine Javascriptfunktion schreiben, welche die
Größe des Anzeigebereiches "ungefähr" ermittelt und dann ein jeweils
passendes Hintergrundbild einbindet, aber das ganze lohnt sich auch nicht.
Denn: Hast Du auch Hintergrundbilder für sagenwama eine Breite von 324px
und eine Höhe von 822px? Kann alles vorkommen.

Am besten wäre eine Lösung in PHP.

Mit PHP hat man soweit ich weiß, keinerlei Möglichkeit Informationen über
den Browser abzurufen. Ansonsten gilt natürlich auch obiges Argument mit
den vielen möglichen Varianten.

Wenn da jemand was weiß wäre ich dankbar.

Am besten fährst Du, wenn Du unterschiedliche Anzeigeflächen schon gleich
beim Erstellen der Seiten berücksichtigst. HTML und CSS bieten wunderbare
Möglichkeiten für ein flüssiges Design, das sich anpaßt. Ein Annageln an
den Bildschirm ist da fehl am Platz.

• Tim

[Tobias K.]

Hallo Manus,

Ich suche nach einer Möglichkeit ein Hintergrundbild in eine Seite einzubinden, welches je nach Auflösung des Nutzers die größe ändert,

das geht nicht (außer du ermittelst die verfügbare Größe des Browserfensters und erstellst für _jede_ Kombinationsmöglichkeit ein Bild.

so das es immer den kompletten Bildschirm ausfüllt.

warum soll das Bild den ganzen Bildschirm ausfüllen? Mein Browserfenster ist nur ca. 800x800px groß.

Am besten wäre eine Lösung in PHP.

das geht erst recht nicht, weil php serverseitig läuft, und keine Ahnung hat, wie die Seite angezeigt wird.

Grüße aus Nürnberg
Tobias

[Danny]

Hi Manus,

es gibt drei Möglichkeiten, die jeweils Vor- und Nachteile haben.

1. Du schreibst ein dynamisches Javascript, dass die Größe des Browserfensters an ein PHP-Skript übergibt. Mittels PHP (gdlib) generierst Du ein temporäres Hintergrundbild (aus einem hochauflösenden Original) der entsprechenden Größe und bindest es entsprechend als Hintergrund ein.

2. Du bindest das "Hintergrundbild" per Image-Tag in einen CSS-Layer ein, der unter allen anderen Layern liegt. Bei normalen Bildern kannst Du die Größe vom Browser frei skalieren lassen, was allerdings oft häßlich aussieht, wg. recht einfach programmierter Skalier-Funktionen des jeweiligen Betriebssystems. Ein anderer Nachteil ist auch, dass sich solche Layer nicht in allen Browsern einwandfrei fixieren lassen, d.h. der Hintergrund würde immer mitscrollen.

3. Du bindest den Hintergrund in einen CSS-Layer ein, der ein Flash-Objekt enthält. Die Flash-Engine arbeitet bekanntlich vektorbasiert und kann deshalb, je nach Objekt, in guter bis sehr guter Qualität skalieren. Ob das wirklich funktioniert, habe ich allerdings noch nicht getestet... ;)

Gruß,
Danny

[Sven Rautenberg]

Moin!

3. Du bindest den Hintergrund in einen CSS-Layer ein, der ein Flash-Objekt enthält. Die Flash-Engine arbeitet bekanntlich vektorbasiert und kann deshalb, je nach Objekt, in guter bis sehr guter Qualität skalieren. Ob das wirklich funktioniert, habe ich allerdings noch nicht getestet... ;)

Hierbei kommen zwei Probleme auf:
1. Damit Flash vektorbasiert zeichnen kann, müssen Vektordaten vorliegen. Ein klassisches Hintergrundbild besteht aber nicht aus Vektoren, sondern aus Pixeln. Die kann man mit Flash zwar auch zoomen und verkleinern, das Ergebnis dürfte aber kaum besser sein als die Variante mit dem <img>.

2. In vielen Browsern ist der Bereich, den Flash einnimmt, immer ganz obenauf. Auch die Angabe eines z-index hilft nichts: Flash verdeckt alle Inhalte, die eigentlich obenauf liegen sollten.

Allein wegen 2. ist diese Lösung nur eine scheinbare.

- Sven Rautenberg