logo

CSS-Hintergrund

Die CSS-Hintergrundeigenschaft wird verwendet, um die Hintergrundeffekte für das Element zu definieren. Es gibt 5 CSS-Hintergrundeigenschaften, die sich auf die HTML-Elemente auswirken:

  1. Hintergrundfarbe
  2. Hintergrundbild
  3. Hintergrund Wiederholung
  4. Hintergrundanhang
  5. Hintergrundposition

1) CSS-Hintergrundfarbe

Die Eigenschaft „Hintergrundfarbe“ wird verwendet, um die Hintergrundfarbe des Elements anzugeben.

Sie können die Hintergrundfarbe wie folgt festlegen:

 h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p> 
Testen Sie es jetzt

Ausgabe:

Meine erste CSS-Seite.

Hallo Javatpoint. Dies ist ein Beispiel für eine CSS-Hintergrundfarbe.

Zeichenfolge der Länge

2) CSS-Hintergrundbild

Die Eigenschaft „Hintergrundbild“ wird verwendet, um ein Bild als Hintergrund eines Elements festzulegen. Standardmäßig deckt das Bild das gesamte Element ab. Sie können das Hintergrundbild für eine Seite wie diese festlegen.

 body { background-image: url(&apos;paper1.webp&apos;); margin-left:100px; } 
Testen Sie es jetzt

4) CSS-Hintergrundanhang

Die Eigenschaft „background-attachment“ wird verwendet, um anzugeben, ob das Hintergrundbild fest ist oder mit dem Rest der Seite im Browserfenster gescrollt wird. Wenn Sie das Hintergrundbild fest eingestellt haben, bewegt sich das Bild beim Scrollen im Browser nicht. Nehmen wir ein Beispiel mit festem Hintergrundbild.

 background: white url(&apos;bbb.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; 
Testen Sie es jetzt

5) CSS-Hintergrundposition

Die Eigenschaft „Hintergrundposition“ wird verwendet, um die Anfangsposition des Hintergrundbilds zu definieren. Standardmäßig wird das Hintergrundbild oben links auf der Webseite platziert.

Sie können folgende Positionen festlegen:

  1. Center
  2. Spitze
  3. unten
  4. links
  5. Rechts
 background: white url(&apos;good-morning.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; background-position: center; 
Testen Sie es jetzt