Verwenden von CSS zum Festlegen eines Hintergrundbilds
Haben Sie sich jemals gefragt, wie Websites diese hübschen Designs und Bilder verwalten, die hinter dem Text schweben? Alles geschieht durch die Magie von Cascading Style Sheets. Mit CSS können Sie nicht nur ein Bild für den Hintergrund Ihrer Seite festlegen, sondern auch die Anzeige des Bilds optimieren, sodass Sie genau das gewünschte Aussehen erhalten.

Der grundlegende Baustein für Ihr Hintergrundbild ist passenderweise die Eigenschaft "Hintergrundbild". Mit dieser Eigenschaft teilen Sie Ihrer Site wie folgt mit, wo sich die Bilddatei befindet:

Körper {
Hintergrundbild: URL ("image.gif");
}

Das ist alles, was Sie tun müssen, um ein Hintergrundbild für Ihre Webseite zu platzieren. Natürlich möchten Sie wahrscheinlich anpassen, wie das Bild angezeigt wird. Angenommen, Sie möchten, dass Ihr Bild oben auf der Seite beginnt, aber horizontal statt linksbündig zentriert ist (Standardausrichtung). In diesem Fall möchten Sie Ihrer CSS-Regel die Eigenschaft 'Hintergrundposition' hinzufügen:

Körper {
Hintergrundbild: URL ("image.gif");
Hintergrundposition: Mitte oben;
}

Beim Definieren der Eigenschaft "Hintergrundposition" legt der erste Wert die horizontale Ausrichtung (links, Mitte oder rechts) und der zweite die vertikale Ausrichtung des Bildes (oben, Mitte oder unten) fest.

Als Nächstes entscheiden Sie, dass Sie verhindern möchten, dass das Bild horizontal gekachelt wird (sich wiederholt), obwohl Sie möchten, dass es vertikal gekachelt wird. Es ist Zeit, die Eigenschaft "Hintergrundwiederholung" hervorzuheben:

Körper {
Hintergrundbild: URL ("image.gif");
Hintergrundposition: Mitte oben;
Hintergrundwiederholung: Wiederholung-y;
}

Wenn Sie den Wert auf 'repeat-y' setzen, wird der Browser angewiesen, das Hintergrundbild entlang der y-Achse zu kacheln, auch bekannt als vertikal, aber nicht entlang der x-Achse (horizontal), was genau das ist, was wir wollten. Wenn Sie es horizontal, aber nicht vertikal kacheln möchten, verwenden Sie stattdessen den Wert 'repeat-x'. Wenn Sie nicht möchten, dass das Bild überhaupt gekachelt wird, geben Sie den Wert "Keine Wiederholung" ein. Der Standardwert besteht darin, das Bild sowohl horizontal als auch vertikal zu kacheln. Wenn dies also die beste Wahl für Ihr Bild ist, müssen Sie die Eigenschaft "Hintergrundwiederholung" überhaupt nicht festlegen.

Schließlich können Sie sich die Eigenschaft 'Hintergrundanhang' ansehen. Standardmäßig wird Ihr Bild beim Scrollen der Seite gescrollt. Wenn Sie das Bild also nicht vertikal wiederholen und eine lange Seite haben, erstreckt sich das Bild nicht bis zum unteren Rand der Seite. Sie können dies ändern, indem Sie die Eigenschaft 'Hintergrundanhang' auf 'Fest' setzen. Dadurch bleibt das Hintergrundbild unabhängig vom Bildlauf der Seite an derselben Stelle auf dem Monitor. Jetzt sehen Ihre Hintergrundbildregeln folgendermaßen aus:

Körper {
Hintergrundbild: URL ("image.gif");
Hintergrundposition: Mitte oben;
Hintergrundwiederholung: Wiederholung-y;
Hintergrund-Anhang: behoben;
}


Wenn Sie Ihre CSS-Regeln so klein wie möglich halten möchten, können Sie alle Hintergrundwerte mithilfe der Eigenschaft 'background' wie folgt in einer Zeile zusammenfassen:

Hintergrund {
URL ("image.gif") Wiederholung-y feste Mitte oben;
}

Wenn Sie die Eigenschaft 'background' verwenden, müssen Sie die Werte in einer bestimmten Reihenfolge auflisten:
[Hintergrundfarbe (falls verwendet)] [Hintergrundbild] [Hintergrundwiederholung] [Hintergrundanhang] [Hintergrundposition]. Sie können jeden Wert weglassen, den Sie nicht benötigen. Sie müssen nur alle Werte auflisten, die Sie in der richtigen Reihenfolge verwenden, sonst funktioniert die Regel nicht.

Video-Anleitungen: #013 CSS in HTML einbinden (Januar 2023).