[CSS/HTML] Non-Repeating Backgrounds in flexiblen Layouts

[Meflin]

Moin moin!

Ein Problem, über das der eine oder andere von euch sicher auch schon gestolpert ist: Man möchte ein flexibles Layout bauen, das sich an die Breite des Browserfensters anpasst, aber gleichzeitig würde man gerne beispielsweise im Header ein Bild verwenden, das Prinzipiell erstmal eine feste Größe hat.

Nun hat man ein Problem: Man könnte das Bild sehr groß machen und immer nur einen Ausschnitt anzeigen. Leute mit größeren Bildschirmen sehen dann mehr von dem bild, Leute mit kleineren weniger. Das ist aber dumm, gleichzeitig steigt auch die Ladezeit der Seite mit der Größe des Bildes, die nichteinmal voll ausgenutzt werden kann. Außerdem gibt es nach wie vor eine maximale Seitengröße, denn das Bild hat ja irgendwann ein Ende.

Die zweite Möglichkeit, das Kacheln, haut auch nicht so ganz hin, weil dreimal das gleiche Bild nebeneinander einfach dumm aussieht, wenn das Bild nicht zum Kacheln konzipiert wurde.

Möglichkeit 2.2 wäre dann, das Bild - irgendwie - nur in einem bestimmten Bereich zu kacheln, Beispielsweise am rechten Rand oder in der Mitte, wobei dann die Randbereiche konstant blieben. Das geht aber auch nicht immer.

Möglichkeit drei besteht darin, das Bild zu resizen, sodass es immer den gewünschten Platz einnimmt. Dabei gehen aber höchstwahrscheinlich die Proportionen verloren.

Aus diesen drei Möglichkeiten kann man dann auch noch ein paar crossover-Lösungen produzieren. Im Moment fällt mir jedoch keine ein, die mich gänzlich überzeugen würde.

Daher meine Frage: Wie geht ihr mit diesem Problem um?

[DGL-luke]

Mein Vorschlag: Verlauf. Entweder das headerbild auf eine Seite und auf die andere den Verlauf bis zum Ende der Seite, oder das Headerbild in die Mitte und zwei verläufe daneben.

Leider sind streckbare Hintergrundbilder noch nicht im CSS-Standard...