Das Hintergrundbild richtig in Position setzen (Tutorial)

Oft möchte man das Hintergrundbild an eine bestimmte Position ausrichten oder eine Hintergrundfarbe / Farbverlauf hinzufügen, wie so etwas gemacht wird zeigen die folgenden Beispiele.

Hintergrundbild mit Wiederholung

Wenn der Hintergrund größer als das Bild ist, wird das Bild solange wiederholt bis der komplette Hintergrund ausgefüllt ist.

<style>
div#box {
 background-image: url(bild.png);
}
</style>

Hintergrundbild ohne Wiederholung

Dies erreichen Sie mit der Angabe background-repeat und dem Wert no-repeat.

<style>
div#box {
 background-image: url(bild.png);
 background-repeat: no-repeat;
}
</style>

Hintergrundbild in einer bestimmten Richtung (horizontal, vertikal) wiederholen. Dies erreichen Sie mit der Angabe background-repeat und den Werten repeat-y beziehungsweise repeat-x.

<style>
div#box {
 background-image: url(bild.png);
 background-repeat: repeat-y;
}
</style>

Hintergrundbild als Cover

Das Bild wird automatisch auf die gesamte Fläche vergrößert. Dabei werden, je nach Bildformat und zur Verfügung stehender Fläche, bestimmte Teile des Bildes abgeschnitten.

<style>
div#box {
 background-image: url(bild.png);
 background-size: cover;
}
</style>

Hintergrundbild als Contain

Contain skaliert das Hintergrundbild so groß wie möglich aber so, dass es vollständig in das Element passt.

<style>
div#box {
 background-image: url(bild.png);
 background-size: contain;
 background-repeat: no-repeat;
 background-position: center;
}
</style>

Hintergrundbild mit Wasserzeichen-Effekt

Der Hintergrund bleibt beim Scrollen des Inhaltes stehen.

„Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.

Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht - ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren. Es packte seine sieben Versalien, schob sich sein Initial in den Gürtel und machte sich auf den Weg. 

<style>
div#box {
 background-image: url(bild.png);
 background-attachment: scroll;
}
</style>

Hintergrundbild positionieren

Mit den Werten top, bottom, left, right und center können Sie das Hintergrundbild positionieren.

<style>
div#box {
 background-image: url(bild.png);
 background-position: top right;
}
</style>

<style>
div#box {
 background-image: url(bild.png);
 background-position: bottom left;
}
</style>

<style>
div#box {
 background-image: url(bild.png);
 background-position: center center;
}
</style>

Eine absolute Positionierung erreichen Sie mit einer Wertangabe in Pixel (px).

<style>
div#box {
 background-image: url(bild.png);
 background-position: 50px 15px;
}
</style>

<style>
div#box {
 background-image: url(bild.png);
 background-position: left 50px top 15px;
}
</style>
Eine andere Möglichkeit: 
<style>
div#box {
 background-image: url(bild.png);
 background-position: right 30px bottom 20px;
}
</style>

Mehrere Hintergrundbilder verwenden

Mit background können Sie Angaben für den Hintergrund zusammenfassen. Damit lassen sich auch mehrere Hintergrundbilder verwenden.

<style>
div#box {
 background: url(bild_2.png) no-repeat 107px 30px,
 url(bild.png) no-repeat center center;
}
</style>
Das verwendete zweite Bild mit transparenten Ecken.
bild_2.png - 242 x 171 Pixel - 37.3 KB

Hintergrundbild mit Hintergrundfarbe

<style>
div#box {
 background: url(bild.png) no-repeat
 center center #D6CEF3;
}
</style>

Hintergrundbild mit Farbverlauf

<style>
div#box {
 background: url(bild.png)
 no-repeat center center,
 linear-gradient(#D6CEF3, #FFD33C, #FF9A47);
}
</style>

Nahtloses Hintergrundbild (Mustertextur)

Das erste Beispiel zeigt ein normales Hintergrundbild mit Wiederholung.
Das zweite Hintergrundbild wurde mit einem Grafikprogramm so angepasst das eine Art Tapete (ohne Rand) entstand.

Tipps

Transparenter Farbverlauf
Hintergrundbild mit Zoom Funktion