CSS Hintergrundbild einrichten leicht erklärt

Wer Hintergrundbilder für ein modernes Webdesign seiner Internetseite verwenden möchte, nutzt dafür gerne CSS background-images. Damit erreicht man schnell und sicher eine eindrucksvolle Optik der Website. Zur einfachen Anwendung hier eine verständliche Anleitung samt Erklärung der englischen Fachbegriffe.

CSS Hintergrundbilder mit URL einfügen

Cascating Style Sheets, auf Deutsch „aufeinander folgende Gestaltungsbögen“ optimieren die Gestaltung von Internetseiten. Das betrifft Farben, wie auch die Seitengestaltung oder das Schriftbild. So entstehen mit von außen eingefügten Audios, Bildern, Videos oder anderen Dateien durch CSS stilvolle Präsentationen.

Sowohl einzelne Bilder als auch Buttons oder Texte in der gewünschten Schriftart, oder die Kombination mehrerer Stilelemente neben- oder hintereinander, lassen sich als CSS-Background-Image an den gewünschten Stellen einsetzen. Zur effektvollen Verschönerung des Onlineauftritts nutzt die kostenfreie Programmiersprache CSS spezielle Anweisungen, darunter die Verknüpfung von Bildern über die URL-Webadresse.

Welche Syntax ist zur Nutzung von CSS notwendig?

Damit sich ein gewünschtes Bild in eine Webseite einfügen lässt, dient die URL()-Funktion als Pfad oder Verknüpfung. Deshalb schreibt man den Bildnamen in Anführungszeichen zwischen den Klammern. Und so sieht der CSS-Befehl zur Einrichtung eines einzelnen Hintergrundbildes aus:

background-image: url(„…“);
zum Beispiel:
background-image: url(„Beispielbild.jpg“)

Alles ist eingebettet in einen virtuellen Behälter namens Container:
[, … ]
div {
erste Eigenschaft: erster Wert;
weitere Eigenschaft: weiterer Wert [;]
}

/* erster Kommentar */
/* eckige Klammern für weitere beliebige Angaben */

Wichtige Funktionen zur Verwendung von CSS Hintergrundbildern

Position des Hintergrunds

Um festzulegen, an welcher Stelle ein Bild erscheint, gibt man den entsprechenden Befehl am einfachsten als Keyword für die CSS background-position an: Entweder top für „oben“, bottom für „unten“, right für „rechts“, left für „links“ oder center für die Position in der „Mitte“ des Containers. Auch none für „keine Bilder“ oder mehrere Anweisungen direkt hintereinander sind möglich, wie top center, wie:

background-position: right,
vererbt: nein
Animationstyp: diskret

Soll sich das Hintergrundbild nicht mit dem Rest vom Bild bewegen, dann:
background-attachment: fixed

Der Pfad kann ein relativer Link vom Bild zur CSS-Datei sein, siehe Jpg-Beispielbild oben. Oder, wie hier, ein absoluter Pfad mit url()-Funktion vom Stammverzeichnis her:

… url(„http//beispiel.com/bilder/…“ oder
… url(„https//nocheinbeispiel.com/irgendwas/…“

Einstellung der Bildgröße vornehmen

Man legt die hight „Höhe“ und width „Breite“ der CSS-Hintergrundbilder fest, zum Beispiel:

hight: 400px
width: 100%

Soll das Bild den kompletten Bildschirm bedecken:

background-size: cover

Soll das Bild in Höhe und Breite alles oder eine angegebene Fläche ausfüllen:

background-size: contain

Mehrere Bilder übereinander darstellen

Für mehrere Bilder als Hintergrund schreibt man die Anweisungen hintereinander und trennt sie durch Kommas. Das können unendlich viele Bilder sein, eines über dem anderen. Die Syntax, also Verknüpfung dafür, könnte bei einem Bild mit Löwe und darunter mit einer Katze und so weiter lauten:

url(„leo.png“), („mieze.png“), …

Sind die Bilder im Unterordner:

url(„/assets/leo.png.“), …

und im übergeordneten Ordner url(„…/leo.png“), …

Um dasselbe Bild wiederholt so abzubilden, bis es den gesamten Container horizontal und vertikal ausfüllt, tippt man:

background-repeat: repeat-x horizontal, repeat-y vertikal,

Wer kein mehrfaches Bild möchte, schreibt:

background-repeat: no-repeat;

Bei CSS die Hintergrundfarbe der Internetseite eingeben oder ändern

Eine bestimmte Farbe für den Hintergrund zu verwenden geht bei Rot so:

background-color: rgba(255)

Beim Hintergrund heißt der allmähliche Übergang von einer Farbe zur anderen linear gradient, wenn er um eine Mittellinie herum stattfindet, up, down, right, left oder diagonally. Hingegen liegt der radial gradient um einen Mittelpunkt, der conic gradient rotiert als circle „kreisförmig“ und als ellipse „ellipsenförmig“ um einen Mittelpunkt. Sogar Farbübergänge top to bottom, „von oben nach unten“ lassen sich erzeugen, right to left „von links nach rechts“.

Oder, wie im Beispiel hier, diagonal top left to bottom right „von links oben nach rechts unten“:

background-image: linear-gradient (to bottom right, blue, green)
anwendbar auf: alle Elemente

Auch mehr als zwei Farben kann man auflisten, dazu Pixel und Prozente festlegen. Dies zeigt die Farbintensität und nach wieviel Prozent der Fläche ein Farbwechsel beginnt. Dagegen steht deg für degree, den Neigungswinkel:

body {
font-size: 20px;
}

background-image: linear gradient (Rot 30%, Gelb 70 %)

background-image: radial gradient (138deg purple 50 px, yellow)

Beispiele zur Festlegung der Schriftart und weiterer Effekte

body {
font: bold , Arial …, … Times New Roman;
}
text-shadow: nein
animiert: nein

Mit font-size ist auch die Schriftgröße variabel einstellbar.

Was bedeutet Vererbung bei CSS?

Übergeordnete Eigenschaften gelten auch für untergeordnete und gehen auf sie über. Wie bei color, „Farbe“, und allem, dem man spezielle Eigenschaften zuweist. Jedoch gilt der Standardwert bei einer Eigenschaft wie border „Rand“, die nicht vererbbar ist. Darum schaut man öfter in die CSS-Eigenschaften-Referenz. Sie listet vererbbare Eigenschaften im CSS auf. Inherit heißt „erben“, initial hier „im CSS festgelegt“ und unset „nicht festgelegt“.

URL-Bilder für CSS über den Browser finden

Mit CSS kann man voreingestellte Werte im Browser nach eigenen Wünschen überschreiben. Das Laden der URL in der Suchmaschine gelingt, wenn diese Gradients, also „Verläufe“, unterstützen. Für die Gestaltung von Stylesheets wählt man für einfache oder mehrfache CSS-Hintergrundbilder auf images.google.com das passende Bild aus. Anschließend klickt man, je nach Suchmaschine oder App, auf das Bild, auf „Teilen“, rechts „Mehr“, und setzt mit „Link eingeben“ durch rechten Mausklick aufs Textfeld das Bild ein. Unter „background-property-images“ ist es im Ordner hinterlegt.

Oben stehen die wichtigsten Grundlagen und Erklärungen zur Anwendung mobilfreundlicher CSS-Dateien. Durch eine Vielzahl kreativer und zeitsparender Gestaltungsmöglichkeiten lassen sich mit Cascading Style Sheets rasch attraktive Hintergrundbilder gestalten und ändern, die sich weder ungewollt verschieben noch verpixeln. Auch durch schnellere Ladezeiten und verbesserte Suchmaschinenoptimierung überzeugt die professionelle Programmiersprache.