Hintergrundbilder in CSS

Autumn | Christine Graf

Auf fast jeder Website gibt es Hintergrundbilder. Immer stellen sich Fragen wie:

  • Wie positioniere ich Hintergrundbilder?
  • Wie lege ich die Grösse fest?
  • Welche Effekte kann ich erzielen?

Die Gestaltungsmöglichkeiten mit Hintergrundbildern sind unendlich.

So grundsätzlich kannst du ein Hintergrundbild in der CSS Datei für einen Bereich festlegen. Wenn du den gesamten Hintergrund der Site ansprechen willst, bietet sich das body Tag an.

body { background-image: url( url zum Bild ); }

Bereich mit Hintergrundbild

Wenn du nur einen Teil der Website mit einem Hintergrundbild versehen willst, kannst du das tun. In diesem Beispiel nehme ich ein div Tag und die Klasse bg1. Das Bild ist 199 Pixel breit, der Bereich doppelt so gross. Ich kann in den Bereich ganz normalen Text schreiben und natürlich auch einen Rahmen darum ziehen. Die Schrift wird im Vordergrund angezeigt.

Das HTML Markup für den Bereich ist immer gleich. Die Klasse muss der Klassenbezeichnung in der CSS Datei entsprechen.

<div class="bg1">Hier ist ein Bereich mit einem Hintergrundbild</div>

CSS für den Bereich

.bg1{
 width: 100%;
 height: 6em;
 border: 0.1em solid blue;
 background-image: url(https://blog.novatrend.ch/wp-content/themes/twentysixteenchild/novatrend.png);
}

So sieht das dann aus:

Hier ist ein Bereich mit einem Hintergrundbild

 

Weil der Bereich so gross ist, wird das Hintergrundbild wiederholt.

Wiederholungen

Wenn du das Bild nur horizontal wiederholen möchtest, also auf der X-Achse, kannst du dafür die Option background-repeat nutzen.

.bg2{
 /* siehe oben */
 background-repeat: repeat-x;
 }
Das Hintergrundbild wird horizontal wiederholt.

 

Man ahnt es schon und siehe da: Es funktioniert auch vertikal auf der Y-Achse.

.bg3{
 /* siehe oben */
 background-repeat: repeat-y;
}
Das Hintergrundbild wird vertikal wiederholt.

 

Wenn es horizontal und vertikal klappt, dann kann man die Wiederholungen sicher auch ganz abschalten.

.bg4{
 /* siehe oben */
 background-repeat: no-repeat;
}
Das Hintergrundbild wird nicht wiederholt.

 

Grösse des Bildes

Mit der Option background-size  kann die Grösse des Bildes beeinflusst werden. Man kann konkrete Werte vorgeben und beispielsweise das Bild verkleinern.

.bg5{
 /* siehe oben */
 background-size: 4em 1em;
}
Die Grösse des Hintergrundbildes kann verändert werden.

 

Leider kann man den Text nicht mehr gut lesen :(. Dazu müsste man mit der opacity Option arbeiten und den Bereich abdunkeln. Das will ich jetzt aber nicht, weil es noch um grundlegende Sachen geht.

Contain und Cover

Der contain Wert sorgt dafür, dass das Seitenverhältnis des Hintergrundbildes erhalten bleibt.

.bg6{
 /* siehe oben */
 background-size: contain;
}
contain: Das Seitenverhältnis des Hintergrundbildes bleibt erhalten. Die Grösse passt sich der Höhe an.

Der cover Wert sorgt dafür, dass das Seitenverhältnis des Hintergrundbildes erhalten bleibt.

.bg7{
 /* siehe oben */
 background-size: cover;
}
cover: Das Seitenverhältnis des Hintergrundbildes bleibt erhalten. Die Grösse passt sich der Breite an.

 

Position des Bildes

Die Position des Bildes kann über die Option background-position bestimmt werden. Standard ist top left. Es gibt auch bottom left, top right, bottom right und natürlich eine Zentrierung in beiden Achsen – center center.

.bg8{
 /* siehe oben */
 background-repeat: no-repeat;
 background-position: center center;
}
Das Hintergrundbild wird zentriert.

 

Das Hintergrundbild kann auch auf den Pixel genau positioniert werden.

.bg9{
 /* siehe oben */
 background-repeat: no-repeat;
 background-position: 300px 30px;
}
Das Hintergrundbild wird 300px von links und 30px von oben positioniert.

 

Ein Fenster zum Hintergrund

Beim Scrollen der Seite sieht es so aus, als wenn ein Fenster über den Hintergrund bewegt wird. Erreicht wird dieser Effekt durch die Option background-attachment.

.bg10{
 /* siehe oben */
 background-image: url(https://blog.novatrend.ch/wp-content/uploads/2017/10/background_1507999853.jpg);
 background-attachment: fixed;
 background-repeat: no-repeat;
}
Ein Fenster zum Hintergrund

Fazit

Das war nur ein kleiner Streifzug durch die Möglichkeiten, die sich für Hintergrundbilder bieten. Es gibt noch viele mehr. Eine gute Übersicht findest du beispielsweise im Wiki von selfhtml (CSS/Eigenschaften/Hintergrundfarben und -bilder).


tl;dr: Hintergrundbilder können auf vielfältige Art genutzt werden

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Ein Gedanke zu „Hintergrundbilder in CSS“

Kommentar verfassen