CSS background position ist ein grundlegender Aspekt der CSS-Programmierung. Es verleiht den Webseiten eine individuell gestaltete Benutzeroberfläche, bei der der Hintergrund eine zentrale Rolle spielt. Mit CSS background position können Hintergründe und Bilder entsprechend auf einer Webseite angeordnet und das Erscheinungsbild der Seite ohne viel Aufwand verbessert werden – und das ganz spielerisch!
CSS background position – Was ist das eigentlich?
CSS background position kontrolliert die Art und Weise, wie sich ein Hintergrund auf einer Webseite verhält, insbesondere, wie er auf verschiedenen Seiten positioniert wird. Durch die Anpassung der Position des Hintergrunds kann das Erscheinungsbild der Website enorm verändert und den Bedürfnissen entsprechend verändert werden.
CSS background position kann dabei auch von jungen Webentwicklern und Quereinsteigern problemlos verwendet werden, da es leicht zu erlernen und anzuwenden ist und meist keine spezifischen Vorkenntnisse vonnöten sind.
CSS background position – Kurze Anleitung
Zunächst einmal wird für die Anordnung bzw. Positionierung eines Elementes auf einer Webseite ein Grundbaustein benötigt. In diesem Fall wird ein Bild in einem Box-Element positioniert. Dabei können externe und lokale Bilder mit den folgenden Endungen verwendet werden.
- .png
- .jpg
- .jpeg
- .bitmap
- .gif
- .webp
Mittels background-size wird die Größe des Bildes vordefiniert und mit background-repeat: no-repeat wird dargelegt, dass das Element nicht wiederholt werden soll.
.box {
width: 100%;
height: 100vh;
background-image: url(LINK);
background-repeat: no-repeat;
background-size: 200px;
}
Nun soll das Bild in diesem Beispiel an der oberen rechten Bildschirmecke positioniert werden. Hierzu wird der Befehl background-position mit dem entsprechenden Richtungswert genutzt, wie im Folgenden ersichtlich ist.
.box {
width: 100%;
height: 100vh;
background-image: url(LINK);
background-repeat: no-repeat;
background-size: 200px;
background-position: top right;
}Mit diesem Befehl wird das Element oben rechts auf dem Bildschirm angeordnet. Weitere mögliche Werte umfassen alle möglichen Richtungen wie zum Beispiel background-position: bottom oder background-position: center.
Weiterhin ist die Anordnung eines Elementes mittels background position auch mit Pixel-Angaben möglich.
.box {
width: 100%;
height: 100vh;
background-image: url(LINK);
background-repeat: no-repeat;
background-size: 200px;
background-position: top 20px right 20px;
}In diesem Beispiel wird das Bild oben rechts mit Rändern von jeweils 20 Pixeln positioniert. Dabei sind auch negative Werte möglich, wobei das Element bzw. Bild dann an den Rändern entsprechend zugeschnitten wird. Negative Prozentangaben subtrahieren ebenfalls Prozente aus dem Bild heraus. Letztlich lässt sich feststellen, dass negative Werte stets das Element selbst betreffen, wohingegen positive Werte für Ränder sorgen.
CSS background position zusammengefasst
Zusammenfassend lässt sich feststellen, dass CSS background position wichtig ist, um den optischen Effekt und die Funktionalität von Websites optimieren zu können. Mit den verschiedenen Anordnungsmöglichkeiten können Designer ihre Kreativität ausleben und ihre Visionen wahr werden lassen. Das spezifische Arrangement von Bildern, Elementen und Grafiken auf einer Webseite kann für eine bestimmte Art der Darstellung und des Webdesigns beitragen und somit die Benutzererfahrung enorm verbessern, aber auch für besondere Situationen ist die Repositionierung von Bildern auf einer Webseite manchmal notwendig, wie zum Beispiel um das Bild einem bestimmten Text anzugleichen und umgekehrt.
Alles was Du über CSS background position wissen solltest
Wie wählt man eine background position aus?
Eine background-Position wird ausgewählt, indem man entweder eine Kombination aus Schlüsselwörtern, prozentualen Werten oder absoluten Werten angibt. Die Schlüsselwörter beinhalten „top“, „bottom“, „left“ und „right“. Prozentuale Werte geben an, wo die obere linke Ecke des Hintergrundbildes platziert wird – 0% 0% ist die obere linke Ecke, 100% 100% die untere rechte Ecke.
Was ist eine background position in CSS?
In CSS kann mittels des Befehls background position bestimmt werden, wo ein Hintergrundbild im Verhältnis zu einem HTML-Element angezeigt werden soll.
Wie positioniert man ein Bild mittels CSS background position?
Um ein Bild mittels CSS background-Position zu positionieren, muss der Befehl background-position in Verbindung mit einer Richtungsangabe verwendet werden. Hierbei können x- und y-Werte in Prozenten oder Pixeln gleichermaßen angegeben werden, um die richtige Position des Hintergrundbildes zu bestimmen.