13.05.2008

Dynamische Flüssigbilder

In dieser Anleitung wurde beschrieben, wie man eine dynamische Hintergrundgrafik erstellt.
Ähnlich, jedoch mit einem anderen CSS-Ansatz funktionieren sogenannte "Flüssigbilder". Sie verschmälern sich bei kleiner werdendem Bildschirmfenster dahingehend, dass der linke und rechte Bereich des Bildes "verschwinden". Das kann bei einem flüssigen Layout mit prozentualen Containerbreiten sehr nützlich sein, hat allerdings auch den Nachteil, dass die Grafik bei sehr kleinen Auflösungen nur noch teilweise zu sehen ist. Das vorweggenommene Ergebnis könnt ihr auf der Demo-Seite (linke Spalte) sehen.

Die CSS-Angaben sind recht einfach, aber effektiv:
Den body definieren wir (u.a.) mit 100% für Höhe und Breite. Im Beispiel binden wir die Grafik in einen Div mit 18% Breite ein. Damit ergeben sich zunächst folgende CSS-Angaben:

body
{
width: 100%;
height: 100%;
}

#container
{
width: 18%;
padding: 0.5%;
}

In diesen #container fügen wir nun eine Hintergrundgrafik ein. Ich verwende dazu ein Bild mit 260px Breite und 244px Höhe. Es wird bei einer relativ großen Bildschirmbreite von 1.440px in Kombination mit dem 18% breiten Div in dem es sich befindet (1.440px x 18% = 259px) vollständig dargestellt. Bei kleineren Auflösungen fehlt links und rechts ein Teil des Bildes.
Wir verwenden eine CSS-Klasse mit folgenden Angaben:

.fluessigbild
{
background-image: url(schloss.jpg);
background-position: center center;
background-repeat: no-repeat;
height: 244px;
}

Die background-position sorgt dafür, dass die Hintergrundgrafik sowohl vertikal als auch horizontal zentriert wird. Sie soll sich nicht wiederholen. Der height-Wert entspricht der Höhe der Grafik.

Im HTML-Teil wird das Ganze so eingebunden:

<div id="container">
<p class="fluessigbild"></p>
</div><!--Ende container-->

Seht euch nun insbesondere die linke Spalte der Demo-Seite an und beobachtet, was mit dem "Schloss-Bild" passiert, wenn ihr das Bildschirmfenster verkleinert oder vergrößert.

nach oben