CSS - Hintergründe

In diesem Kapitel erfahren Sie, wie Sie Hintergründe für verschiedene HTML-Elemente festlegen. Sie können die folgenden Hintergrundeigenschaften eines Elements festlegen:

  • Das background-color Mit der Eigenschaft wird die Hintergrundfarbe eines Elements festgelegt.

  • Das background-image Mit der Eigenschaft wird das Hintergrundbild eines Elements festgelegt.

  • Das background-repeat Mit der Eigenschaft wird die Wiederholung eines Bildes im Hintergrund gesteuert.

  • Das background-position Mit dieser Eigenschaft wird die Position eines Bildes im Hintergrund gesteuert.

  • Das background-attachment Mit dieser Eigenschaft wird das Scrollen eines Bildes im Hintergrund gesteuert.

  • Das background Eigenschaft wird als Kurzform verwendet, um eine Reihe anderer Hintergrundeigenschaften anzugeben.

Stellen Sie die Hintergrundfarbe ein

Das folgende Beispiel zeigt, wie die Hintergrundfarbe für ein Element festgelegt wird.

<html>
   <head>
   </head>

   <body>
      <p style = "background-color:yellow;">
         This text has a yellow background color.
      </p>
   </body>
</html>

Dies führt zu folgendem Ergebnis:

Stellen Sie das Hintergrundbild ein

Wir können das Hintergrundbild einstellen, indem wir lokal gespeicherte Bilder wie unten gezeigt aufrufen -

<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
   </head>
   
   <body>
      <h1>Hello World!</h1>
   </body>
<html>

Es wird das folgende Ergebnis erzeugt -

Wiederholen Sie das Hintergrundbild

Das folgende Beispiel zeigt, wie das Hintergrundbild wiederholt wird, wenn ein Bild klein ist. Sie können den Wert " Keine Wiederholung" für die Eigenschaft " Hintergrundwiederholung" verwenden, wenn Sie ein Bild nicht wiederholen möchten. In diesem Fall wird das Bild nur einmal angezeigt.

Standardmäßig hat die Eigenschaft background-repeat den Wiederholungswert .

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Das folgende Beispiel zeigt, wie das Hintergrundbild vertikal wiederholt wird.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Das folgende Beispiel zeigt, wie das Hintergrundbild horizontal wiederholt wird.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-x;
         }
      </style>
   </head>
   
   <body>
      <p>Tutorials point</p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Stellen Sie die Position des Hintergrundbilds ein

Das folgende Beispiel zeigt, wie Sie die Position des Hintergrundbilds 100 Pixel von der linken Seite entfernt einstellen.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Das folgende Beispiel zeigt, wie Sie die Position des Hintergrundbilds 100 Pixel von der linken Seite und 200 Pixel von oben nach unten einstellen.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-position:100px 200px;
         }
      </style>
   </head>

   <body>
      <p>Tutorials point</p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Stellen Sie den Hintergrundanhang ein

Der Hintergrundanhang bestimmt, ob ein Hintergrundbild fixiert ist oder mit dem Rest der Seite scrollt.

Das folgende Beispiel zeigt, wie Sie das feste Hintergrundbild festlegen.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Das folgende Beispiel zeigt, wie Sie das Hintergrundbild für den Bildlauf festlegen.

<!DOCTYPE html>
<html>
   <head>
      <style>
         body {
            background-image: url('/css/images/css.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-attachment:scroll;
         }
      </style>
   </head>

   <body>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>The background-image is fixed. Try to scroll down the page.</p>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Kurzschrift Eigentum

Mit der Hintergrundeigenschaft können Sie alle Hintergrundeigenschaften gleichzeitig festlegen. Zum Beispiel -

<p style = "background:url(/images/pattern1.gif) repeat fixed;">
   This parapgraph has fixed repeated background image.
</p>