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:
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;
}
Man ahnt es schon und siehe da: Es funktioniert auch vertikal auf der Y-Achse.
.bg3{
/* siehe oben */
background-repeat: repeat-y;
}
Wenn es horizontal und vertikal klappt, dann kann man die Wiederholungen sicher auch ganz abschalten.
.bg4{
/* siehe oben */
background-repeat: no-repeat;
}
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;
}
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;
}
Der cover Wert sorgt dafür, dass das Seitenverhältnis des Hintergrundbildes erhalten bleibt.
.bg7{
/* siehe oben */
background-size: cover;
}
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 kann auch auf den Pixel genau positioniert werden.
.bg9{
/* siehe oben */
background-repeat: no-repeat;
background-position: 300px 30px;
}
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;
}
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
Schreibe einen Kommentar