Webseiten mit Hintergrundbildern gestalten

Viele Website-Designs verwenden Hintergrundbilder. Dabei gibt es zwei Grundformen:

• ein -meist kleines- sich wiederholendes Hintergrundbild
• ein noch Möglichkeit bildschirmfüllendes, ganzseitiges Hintergrundbild

Hintergrundbild mit Wiederholung

In den meisten Fällen füllt das sich wiederholende Hintergrundbilder den gesamten Bildschirmbereich. Das heißt, sie werden als normales Attribut im body-Bereich verwendet, zum Beispiel so:

Beispiel mit ganzseitig wiederholendem Hintergrundbild

Die in diesem Beispiel verwendete CSS-Festlegung sieht so aus:

<style type="text/css">
body {
background-image: url('muster-wiederholen-ganzseitig.jpg');
background-repeat: repeat
/* weitere Festlegungen body */
}

/* weitere Festlegungen */
}
</style>

Es ist aber auch möglich, die Wiederholung auf eine Richtung zu beschränken, entweder waagerecht oder senkrecht, zum Beispiel so:

Beispiel mit einem sich waagerecht wiederholenden Hintergrundbild

Dazu der CSS-Code:

<style type="text/css">
body {
background-image: url('stripe-1.png');
background-repeat: repeat-x;
background-position:0 30px;
/* weitere Festlegungen body */
}

/* weitere Festlegungen */
}
</style>

Bildschirmfüllende Hintergrundbilder

Wenn man ein besonderes Motiv als Hintergrundbild verwenden will, dann ist meist keine Wiederholung erwünscht. Eine einfache Variante sieht so aus: Beispiel.

Dazu der CSS-Code:

<style type="text/css">
body {
background-image: url('DSCF2751-sonnenblume-960x540.jpg');
background-repeat: no-repeat;
/* weitere Festlegungen body */
}

/* weitere Festlegungen */
}
</style>

Das ist natürlich noch unbefriedigend, denn das Hintergrundbild klebt links oben in der Ecke. Eine waagerechte Zentrierung ist aber unproblematisch: Beispiel. Dazu der CSS-Code:

<style type="text/css">
body {
background-image: url('DSCF2751-sonnenblume-960x540.jpg');
background-repeat: no-repeat;
background-position: 50% 5%;
/* weitere Festlegungen body */
}

/* weitere Festlegungen */
}
</style>

Außerdem kann man vermeiden, dass das Hintergrundbild bei längeren Seiten aus dem sichtbaren Bereich scrollt: Beispiel. Dazu der CSS-Code:

<style type="text/css">
body {
background-image: url('DSCF2751-sonnenblume-960x540.jpg');
background-repeat: no-repeat;
background-position: 50% 5%;
background-attachment:fixed;
/* weitere Festlegungen body */
}

/* weitere Festlegungen */
}
</style>

Bei all diesen Beispielen wurde die Größe des Hintergrundbildes nicht verändert. Das hat einen einfachen Grund: der CSS2-Standard sieht eine Anpassung der Größe des Hintergrundbildes nicht vor.

Um dennoch eine Größenanpassung zu erreichen, muss man einen Trick anwenden. Hier zunächst das Beispiel mit Größenanpassung. Der Anpassungseffekt wird dadurch erreicht, dass das Bild nicht als Hintergrundbild sondern mit dem img-Tag eingefügt wird. Alle Elemente werden absolut positioniert. Der erforderliche CSS-Code sieht so aus:

<style type="text/css">
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}

#hintergrund {
position:absolute;
z-index:1;
width:100%;
height:100%;
}

#scrollbar {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
overflow:auto;
z-index:2;
}

#inhalt {
padding-left:150px;
padding-right:150px;
padding-top:20px;
padding-bottom:20px
position:absolute;
}
</style>

Und das ist der HTML-Teil:

<div>
    <img id="hintergrund" src="DSCF2751-sonnenblume-960x540.jpg">
</div>
<div id="scrollbar">
    <div id="inhalt">Hier kommt der Inhalt rein
    </div>
</div>

Es darf aber nicht verschwiegen werden, dass diese Größenpassung zu negativen Effekten führen kann: Je nach dem, wie weit die Proportionen von Höhe und Breite beim PC des Betrachters von den Proportionen des Orginalbildes abweichen, wird das Bild mehr oder weniger stark verzerrt. Das kann dann auch schon mal zu unfreiwilliger Belustigung führen.