Allgemeine Themen & Trends

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.

Eine Webseite kann man durch viele unterschiedliche Eingabebefehle steuern… ob Gradient, Overflow oder ähnliches. CSS List Style gehört dazu. Was genau das ist, welche Formen es gibt und wie Du es für Dich nutzen kannst, zeigen wir Dir jetzt.

CSS List Style kurz erklärt

CSS List Style ist ein Teil der CSS-Spezifikation, mit dem Du die Darstellung von Listen in HTML definieren kannst. Hierbei ist es egal, ob es sich um geordnete Listen (ol) oder um ungeordnete Listen (ul) handelt. Auf beide Listenarten hat der Eingabebefehl dieselben Auswirkungen.

Inwieweit kann man die jeweiligen Listen nun gestalten? Du kannst sie mit verschiedenen Eigenschaften wie zum Beispiel einer speziellen Schriftart, einer anderen Farbe oder einem Füllbild einrichten. Weiterhin kannst Du mithilfe von CSS List Style auch ein Zeichen oder ein Symbol an die entsprechenden Listenelemente anhängen.

Warum ist die Gestaltung von Aufzählungen und Co. überhaupt relevant? Wenn Du zum Beispiel per Laptop an Deiner Webseite arbeitest, kannst Du durch diesen Eingabebefehl ein Navigationsmenü optisch ansprechend gestalten. Auch Slideshows zu programmieren, ist damit möglich. Für ein responsives Webdesign kann CSS List Style essenziell sein.

Außerdem: Für diesen Eingabebefehl gibt es eine Shorthand: list-style. Alle im Folgenden aufgelisteten Variationen sind in dieser Shorthand enthalten.

Eigenschaften von CSS List Style

Es gibt eine Reihe von unterschiedlichen Eigenschaften, die Du mithilfe des CSS-Listenstils anwenden kannst. Darunter:

listen-style-type

Mit der Eigenschaft list-style-type kannst Du Zeichen, Symbole, Ziffern oder Buchstaben an die Listenelemente anhängen. Für geordnete Listen eignen sich hier eher Ziffern/Buchstaben, während Zeichen und Symbole für ungeordnete Aufzählungen gedacht sind. Einige Beispiele für mögliche Symbole in diesem Zusammenhang sind: Kreise, Quadrate, Diskette, Haken, Pfeile und Sterne.

Hier ist ein Beispiel für die Verwendung von list-style-type in CSS bei einer ungeordneten Liste:

ul { 
list-style-type: circle;
 } 

In diesem Beispiel definieren wir die Liste mit der list-style-type-Eigenschaft als „Kreis“. Das bedeutet, dass vor jedem Element in der Liste ein Kreiszeichen angezeigt wird.

list-style-position

Die Eigenschaft list-style-position verwendet man, um festzulegen, wo der Punkt einer Liste angezeigt wird. Es gibt zwei mögliche Werte: innen (inside) und außen (outside). Der Standardwert für diese Eigenschaft ist in der Regel außen, was bedeutet, dass der Punkt neben dem ersten Zeichen des Listenelements angezeigt wird.

Beispielsweise kannst Du die Listenstil-Position anwenden, um eine ungeordnete Liste wie folgt zu erstellen:

ul { 
list-style-position: outside;
 } 

Der Standardwert würde jedem Listenelement einen Punkt außen vor dem ersten Zeichen des Listenelements hinzufügen. Das sähe auf der Webseite wie folgt aus:

• 1. Punkt
• Punkt 2
• 3. Punkt

Wenn Du die Listenstil-Position auf innen festlegst, wird der Punkt innerhalb des Listenelements angezeigt, direkt vor dem ersten Zeichen:

Erster Punkt •
Zweiter Punkt •
Dritter Punkt •

Dies ist ein nützliches Tool, wenn Du Deine Liste auf eine einzigartige Weise hervorheben willst. Es kann auch verwendet werden, um die Lesbarkeit einer Liste zu verbessern.

Kleine abschließende Randnotiz: Innerhalb des Eingabebefehls list-style-position ist es außerdem möglich, Hintergründe (durch background) und Abstände (durch padding) sowie Richtungen (left, right, center) der Liste in Kombination festzulegen. Programmierst Du zum Beispiel, dass das Symbol links vom Text platziert wird, wird es auf Deiner Webseite auch auf der linken Seite des Textes angezeigt.

list-style-image

Ein Bild als Listensymbol kannst Du mit der Eigenschaft list-style-image auswählen. Wenn Du diese Eigenschaft vorher festlegst, musst Du den entsprechenden Pfad zu dem Bild angeben, welches Du als Listensymbol verwenden willst. Alternativ kannst Du auch ein Bild anstelle eines Symbols an die Listenelemente anhängen.

Hier ist ein einfaches Beispiel für eine ungeordnete Liste, die eine Sonne als Bild in der Liste zeigen würde:

ul { 
list-style-image: url("images/sun.png");
 }

Da diese Eigenschaft von Eltern- zu Kindelementen übernommen werden kann, kann sie vererbt werden.

list-style: none

Schließlich kannst Du auch eine benutzerdefinierte Liste erstellen, indem Du den list-style-type auf „none“ setzt. Dies bedeutet, dass kein Zeichen vor jedem Element in der Liste angezeigt wird. Bei einer ungeordneten Liste sähe das etwa so aus:

 ul { 
list-style-type: none;
 }

::marker

Abschließend: Die farbliche Gestaltung einer Liste im CSS kann man über die Art und Weise der Markierung (::marker) festlegen.

Wenn Du zum Beispiel eine Liste hast, kannst Du nach der Eingabe eines Listenpunktes diese Spezifikation hinzufügen und dann zum Beispiel die entsprechende Farbe eingeben. Soll ein Listenpunkt beispielsweise rot markiert werden, schreibst Du:

li::marker { 
color: red;
 }

Auf einen Blick

Zusammenfassend kann gesagt werden, dass CSS List Style eine sehr nützliche Funktion darstellt, um Listen in HTML anzupassen. Mit verschiedenen Eigenschaften – darunter listen-style-type, -postion, -image, listen-style: none sowie ::marker – kannst Du die Darstellung von (un-)geordneten Listen auf Deiner Webseite optisch anpassen und sie ansprechender gestalten. Das kannst Du zum Beispiel bei Navigationsfeldern oder Slideshows machen.

FAQ zu css list style

Um kleinere Änderungen an den Inhalten auf Deiner Webseite am Laptop oder PC vorzunehmen, kannst Du die Pseudo-Elemente before und after nutzen. Sie können die einiges an Arbeit beim Programmieren abnehmen. Wie das Ganze funktioniert und Wie Du before und after für Dich nutzen kannst, stellen wir Dir im Folgenden vor.

Worum handelt es sich bei before und after?

Im Zuge des Eingabebefehls von CSS Content werden die Elemente ::before und ::after genutzt. Dabei handelt es sich um sogenannte Pseudo-Elemente, die anderen HTML-Elementen hinzugefügt werden können, um zusätzliche visuelle und/oder ästhetische Effekte zu erzeugen.

Hierbei gilt: Man kann es vor ein Element (before) oder danach (after) setzen. Um was für einen Inhalt es sich bei dem entsprechenden Pseudo-Element handelt, kann unterschiedlich sein – egal, ob Texte, Listen oder Bilder.

Nutzung von before und after

Die Eingabe von before/after nutzt man daher oft, um bestehende Entwürfe mit diversen HTML-Elementen zu verbessern: Beispielsweise kann man ein Element mit einem before- und after-Element formatierten, um eine bestimmte Breite oder Höhe zu erzielen, oder um die Position des Elements zu ändern.

Oder man gebraucht die Eingabe, um ein Element visuell zu gestalten und/oder hervorzuheben. So finden sie Verwendung, um ein Menü oder einen Link zu verzieren. Sie können aber auch gebraucht werden, um ein Symbol oder ein Bild vor bzw. nach einem Element zu platzieren.

In diesem Zusammenhang praktisch: before und after können ebenfalls verwendet werden, um gewisse Elemente zu gruppieren. Zum Beispiel kannst Du das before-Pseudo-Element hinzufügen, wenn Du eine Liste von Elementen hast, um die Liste zu kennzeichnen; ein after-Element hingegen kannst Du nutzen, um diese zu beenden.

In CSS können diese Pseudo-Elemente mithilfe der „::before“- und „::after“-Syntax definiert werden.

Willst Du zum Beispiel die Farbe am Ende des Satzes „Wir lieben die Farbe Grün“ von Schwarz in Grün ändern, kannst Du das mit ::after tun.

Hierbei steht im HTML-Codeschnipsel …

<p class="text">Wir lieben die Farbe</p>

… und in CSS würde dann entsprechend stehen:

.text::after{
  content: "Grün";
  color: green;
}

Eingabe wie diese kannst Du auf die unterschiedlichste Weise und vielfältig nutzen. Die before-after-Syntax ermöglicht es daher, verschiedene Arten von Inhalten wie Grafiken, Texte, Listen, Hintergrundfarben und vieles mehr zu gestalten. Mit der richtigen Kombination von CSS-Anweisungen können before- und after-Elemente gleichermaßen in einem Design benutzt werden, um einzigartige und interessante Ergebnisse zu erzielen.

Achtung: In den meisten Fällen sollten before- und after-Elemente nur verwendet werden, um kleine Änderungen vorzunehmen, da sie bei falscher Anwendung die Seitenladezeit beeinträchtigen können.

Auf einen Blick

Mithilfe der Pseudo-Elemente before und after kann man Webdesigns verbessern und einzigartige visuelle Effekte erzeugen. Man gebraucht sie, um Elemente einzufügen, zu formatieren, zu gestalten und zu gruppieren. Sie tauchen in der Regel im Zusammenhang mit dem entsprechenden Content in CSS auf – in der Schreibweise „::before“ sowie „::after“.

FAQ zu before und after

Für die Gestaltung einer Webseite ist nicht nur die Farbgebung – zum Beispiel über CSS Gradient – wichtig, sondern auch die Platzierung von Abständen. Neben dem Padding gibt es so zum Beispiel auch die Eigenschaft Justify Content im CSS. Was mithilfe dieses Tools bewirkt wird und wie man es nutzen kann, erfährst Du nun.

Was ist Justify Content im CSS?

Diese Eigenschaft findet im CSS Verwendung.

Justify Content legt fest, wie man die inhaltlichen Elemente – der Content – in einem Flex-Container platziert. Genauer: Inwieweit die Elemente Raum in Relation zur Hauptachse dieses Containers sowie in Abhängigkeit zum Grid-Container finden.

Daher hilft es dabei, den Inhalt eines flexiblen Containers zu positionieren und zu organisieren. Man kann es also verwenden, um ansprechende Layouts zu erstellen.

Anwendung und Formen

Justify Content akzeptiert verschiedene Werte, die bestimmen, wie die sich Elemente im Flex-Container aufteilen. Welche Werte gehören dazu?

• flex-start: Mit dieser Attribuierung kann man alle Elemente am Beginn der Flex-Container-Hauptachse platzieren. Folgend verteilt sich der Content auf der Achse nach hinten. Es kann vorkommen, dass am Schluss Abstände entstehen.
• flex-end: Die Hinzugabe dieses Wertes bedeutet essenziell die dasselbe wie „flex-start“ – mit dem Unterschied, dass in diesem Fall die Richtung (vom Ende zum Anfang) geändert ist.
• center: Der center-Wert positioniert alle Elemente gleichmäßig in der Mitte der Flex-Container-Hauptachse. Abstände können am Anfang und am Ende der Achse auftreten.
• left/right: Funktioniert in derselben Weise wie der center-Wert, lediglich ausgehend von links oder rechts.
• space-between: Ähnlich wie der center-Wert verteilt man mit „space-between“ jeglichen Content, den man hat, von der Mitte der Hauptachse ausgehend gleichmäßig im flexiblen Container. Der Unterschied zu „center“ besteht darin, dass es keine Abstände am Anfang und am Schluss der Achse gibt.
• space-around: Auch dieser Wert hat seinen Start in der Hauptachsenmitte des Flex-Containers, mit jeweils gleichbleibenden Abständen zwischen den Inhaltselementen. Er bewirkt dasselbe – mit dem Unterschied, dass die Abstände zu Beginn und zum Schluss der Achse um die Hälfte reduziert sind.
• space-evenly: Bei diesem Wert gilt ebenfalls dasselbe (ausgehend von der Mitte, regelmäßig verteilte Inhaltselemente). Was bildet hierbei das Unterscheidungskriterium? Die Abstände zu Beginn und zum Schluss der Achse sind mit denen zwischen den jeweiligen Inhaltselementen identisch.
• normal: Dieser Wert stellt die Standarteinstellung dar. Seine Wirkung auf der angezeigten Webseite ähnelt „stretch“.
• stretch: Wichtig – diese Wertzuschreibung funktioniert lediglich bei Grid-Containern! Durch den stretch-Wert werden alle Inhaltselemente so gestreckt, dass sie den Raum des Containers vollkommen füllen.
• safe/unsafe: Diese beiden Werten geben an, wie (un-)sicher es ist, dass die Verteilung der Inhaltselemente aus dem entsprechenden Container hinausgehen oder nicht. Dadurch ist zum Beispiel die Lesefreundlichkeit einer Webseite abhängig. Man vermeidet ein „Überlaufen“.

Willst Du nun zum Beispiel den Eingabebefehl für Justify Content im CSS vornehmen, schreibst Du an die entsprechende Stelle im Code Folgendes:

.verteilt { justify-content: value; }

„value“ ändert sich hierbei je nachdem, welchen Wert Du einsetzen willst – ob „center“, „space-evenly“ oder Ähnliches ist komplett Dir überlassen.

Auf einen Blick

Die Einstellung von Justify Content im CSS ist also sehr nützlich, wenn es darum geht, den Inhalt eines flexiblen Containers zu positionieren und zu organisieren. Mithilfe von unterschiedlichen Wertzuschreibungen kann man es verwenden, um ansprechende Layouts am Laptop oder PC zu erstellen sowie den Inhalt eines Flex-Containers an die Anforderungen des Benutzers anzupassen, und stellt ein mächtiges Werkzeug beim Programmieren dar, das dabei hilft, ansprechende Layouts zu erstellen.

FAQ zu Justify Content im CSS

Willst Du programmieren lernen, kommst Du an gewissen Eingabebefehlen und Shorthands nicht vorbei. Einer der Befehle im CSS ist der zur Positionierung eines Elementes – darunter fällt auch „postion absolute“. Was diese Eigenschaft ausmacht, was es bringt und wie Du es für Dich nutzen kannst, erfährst Du hier.

Was ist position absolute?

Der Eingabebefehl „position absolute“ gehört zu den Positionseigenschaften, die man im CSS spezifizieren kann. Davon gibt es insgesamt fünf, nämlich: static, relative, fixed, sticky – und eben absolute.

Was bewirkt die Eingabe dieses Befehls?

Rudimentär gesprochen ermöglicht die Eigenschaft „position absolute“ es Entwicklern und Webdesignern, Elemente an einer beliebigen Stelle auf einer Webseite zu platzieren.

Eine absolute Positionierung meint in diesem Zusammenhang, dass das Element später auf einer Webseite an exakt der Stelle angezeigt wird, an der es zuvor im Code positioniert und ausgerichtet wurde.

Es ist in seiner Position unabhängig von anderen Elementen, die sich auf der Seite befinden, zum Beispiel von Texten. Das heißt, Du kannst auf diese Weise zum Beispiel ein Bild an einer bestimmten Stelle auf Deiner Seite zeigen. Mit der Eingabe von „position: absolute“ bleibt es dann auch dort.

Wie verwendest Du position absolute?

Um absolute Positionierung zu verwenden, musst Du das position-Attribut im auf „absolute“ setzen.

Im Anschluss kannst Du mithilfe der Eigenschaften „top“ (oben), „bottom“ (unten), „left“ (links), „right“ (rechts) und deren Variationen die gewünschte Position spezifizieren, an der Du das Element platziert haben möchtest.

Weiterhin wichtig: Das Ganze ist in Pixel (px) oder Prozent (%) anzugeben.

Willst Du zum Beispiel ein Element oben links auf Deiner Webseite angeben, könnte eine der Eingaben an der entsprechenden Stelle im Code wie folgt aussehen:

position: absolute; top: 10px; left: 20px; 

Außerdem kann man im Rahmen der absoluten Positionsangabe mithilfe von Maßangaben – zum Beispiel zu Größe und Abstand – arbeiten, darunter zum Beispiel: Höhe und Breite eines Elementes (height/width) oder Polsterungen (padding).

Angewendet wird die absolute Positionierung vor allem in CSS – egal, ob via Laptop oder PC.

Welche Vor- und Nachteile bringt die Verwendung von position absolute mit sich?

Die Elemente auf einer Webseite absolut zu positionieren, kann sehr hilfreich sein, wenn Du ein Element an einem bestimmten Ort auf Deiner Seite platzieren möchtest – insbesondere dann, wenn Du es unabhängig anderer Elemente festlegen willst.

Diese Eigenart kann jedoch auch zum Problem werden. Denn: Im Zuge des Gebrauchs von position absolute können dadurch die Maße von Eltern- und Kindelementen auf einer Webseite divergieren. Das heißt, sie besitzen dann zum Teil unterschiedliche Maße, was zu einem unregelmäßigen Webseitenaufbau führt.

Auf einen Blick

Als Teileigenschaft der Positionseingabebefehl im Code kann „position absolute“ genutzt werden, um Elemente auf einer Webseite an einer bestimmten Stelle zu platzieren. Das geschieht unabhängig der anderen Elemente.

Daher kann „position absolute“ ein hilfreiches Tool im Webdesign, Programmieren und Co. darstellen. Durch Richtungs- wie Maßangaben kann genau spezifiziert werden, wo das entsprechende Element später auf der Seite angezeigt wird.

FAQ zu position absolute