Hintergrund-Positionierung

2.1 Eigenschaft background-position

Die Eigenschaft background-position in CSS wird verwendet, um die Startposition eines Hintergrundbildes in einem Element festzulegen. Diese Eigenschaft erlaubt es, genau zu bestimmen, wo das Hintergrundbild innerhalb eines Elements platziert wird. background-position kann zur Feinabstimmung der Darstellung von Hintergrundbildern und zur Erstellung komplexerer Designs verwendet werden.

Syntax von background-position

Die Eigenschaft background-position nimmt zwei Werte an, die die horizontale und vertikale Position des Hintergrundbildes angeben:

    
      background-position: horizontale-position vertikale-position;
    
  

Wenn nur ein Wert angegeben ist, wird der zweite standardmäßig als center betrachtet.

Welche Werte die horizontale und vertikale Position haben können:

• Schlüsselwörter:
  • left: Ausrichtung am linken Rand
  • center: Zentrierung
  • right: Ausrichtung am rechten Rand
  • top: Ausrichtung am oberen Rand
  • bottom: Ausrichtung am unteren Rand
• Prozentwerte:
  • Zum Beispiel, 50% 50% positioniert das Bild in der Mitte
  • Prozentwerte beziehen sich auf die Elementgröße, nicht auf das Bild
• Pixelwerte:
  • Zum Beispiel, 10px 20px positioniert das Bild 10 Pixel vom linken Rand und 20 Pixel vom oberen Rand entfernt
• Kombinationen von Werten:
  • Man kann Schlüsselwörter und Prozentwerte kombinieren, z.B. left 50%

2.2 Schlüsselwörter

Schlüsselwörter:

• left, center, right: horizontale Ausrichtung
• top, center, bottom: vertikale Ausrichtung

Beispiele für die Verwendung von Schlüsselwörtern

Bild wird in der oberen linken Ecke positioniert:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* Bild wird in der oberen linken Ecke positioniert */
      }
    
  

Bild wird im Zentrum positioniert:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* Bild wird im Zentrum positioniert */
      }
    
  

Bild wird in der unteren rechten Ecke positioniert:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* Bild wird in der unteren rechten Ecke positioniert */
      }
    
  

2.3 Prozentwerte

Prozentwerte geben die Position des Bildes relativ zur Größe des Elements an.

Beispiele für die Verwendung von Prozentwerten

Bild wird im Zentrum positioniert:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* Bild wird im Zentrum positioniert */
      }
    
  

Bild wird in der oberen linken Ecke positioniert:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* Bild wird in der oberen linken Ecke positioniert */
      }
    
  

Bild wird in der unteren rechten Ecke positioniert:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* Bild wird in der unteren rechten Ecke positioniert */
      }
    
  

2.4 Absolute Einheiten (px, em, rem)

Werte in Pixel oder anderen absoluten Einheiten erlauben eine genaue Positionierung des Bildes.

Bild wird im Zentrum positioniert:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* Bild wird 10 Pixel nach rechts und 20 Pixel nach unten vom oberen linken Rand positioniert */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* Bild wird 2em nach rechts und 3em nach unten positioniert */
      }
    
  

2.5 Kombination von Werten

Du kannst Schlüsselwörter und absolute Einheiten kombinieren, um eine genauere Positionierung zu erzielen.

Kombination von Werten:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* Bild wird 20 Pixel nach rechts und 10 Pixel nach unten vom oberen linken Rand positioniert */
      }