Hintergrundstile in CSS anwenden | Webdesign-Tipps

Einführung

In diesem Lab lernen Sie, wie Sie erweiterte Hintergrundstile mit CSS anwenden, wobei der Schwerpunkt auf der Verbesserung des Webseiten-Designs durch Farb- und Bildmanipulation liegt. Das Lab behandelt wesentliche Techniken wie das Setzen von Hintergrundfarben für HTML-Elemente, das Hinzufügen und Skalieren von Hintergrundbildern, die Steuerung der Bildpositionierung und -wiederholung sowie die Kombination mehrerer Hintergrund-Eigenschaften zur Erstellung visuell ansprechender Web-Layouts.

Durch praktische, praxisnahe Beispiele erkunden Sie verschiedene Methoden zur Angabe von Hintergrundfarben mithilfe von benannten Farben, Hexadezimalcodes und RGB-Funktionen sowie das Einbinden von Hintergrundbildern mit präzisen Skalierungs- und Positionierungstechniken. Am Ende dieses Labs werden Sie praktische Fähigkeiten im Umgang mit CSS-Hintergrund-Eigenschaften erworben haben, um dynamischere und ansprechendere Webseiten-Designs zu erstellen.

Hintergrundfarbe für HTML-Elemente festlegen

In diesem Schritt lernen Sie, wie Sie Hintergrundfarben für HTML-Elemente mit CSS festlegen. Hintergrundfarben sind eine grundlegende Methode, um das visuelle Design von Webseiten zu verbessern, indem verschiedenen Elementen Farbe hinzugefügt wird.

Zuerst erstellen wir eine HTML-Datei, um die Hintergrundfarben-Formatierung zu demonstrieren. Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens styles.html im Verzeichnis ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Color Example</title>
    <style>
      /* Hier fügen wir unser CSS ein */
    </style>
  </head>
  <body>
    <div class="box1">First Box</div>
    <div class="box2">Second Box</div>
    <p class="paragraph">This is a paragraph with a background color.</p>
  </body>
</html>

Nun fügen wir etwas CSS hinzu, um Hintergrundfarben für verschiedene Elemente festzulegen. Aktualisieren Sie den <style>-Abschnitt in der HTML-Datei:

.box1 {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
}

.box2 {
  background-color: #ff5733;
  color: white;
  padding: 20px;
  margin: 10px;
}

.paragraph {
  background-color: rgb(200, 230, 255);
  padding: 15px;
}

In diesem Beispiel haben wir drei Möglichkeiten zur Angabe von Hintergrundfarben gezeigt:

Benannte Farbe (blue)
Hexadezimaler Farbcode (#FF5733)
RGB-Farbfunktion (rgb(200, 230, 255))

Speichern Sie die Datei und öffnen Sie sie in einem Webbrowser, um die verschiedenen Hintergrundfarben zu sehen, die auf die Elemente angewendet wurden.

Hintergrundbild mit Größenanpassung hinzufügen

In diesem Schritt lernen Sie, wie Sie Hintergrundbilder zu HTML-Elementen hinzufügen und deren Größe mit CSS steuern. Wir bauen auf dem vorherigen Beispiel auf, indem wir die Datei styles.html im Verzeichnis ~/project ändern.

Das Beispielbild befindet sich im Verzeichnis ~/project.

Aktualisieren Sie nun die Datei styles.html mit folgendem Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Sizing</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
      }

      .cover-background {
        background-image: url("background-sample.jpg");
        background-size: cover;
      }

      .contain-background {
        background-image: url("background-sample.jpg");
        background-size: contain;
      }

      .custom-size-background {
        background-image: url("background-sample.jpg");
        background-size: 200px 150px;
      }
    </style>
  </head>
  <body>
    <div class="image-container cover-background">
      Cover: Fills entire container
    </div>
    <div class="image-container contain-background">
      Contain: Fits entire image
    </div>
    <div class="image-container custom-size-background">
      Custom Size: 200x150 pixels
    </div>
  </body>
</html>

Dieses Beispiel demonstriert drei verschiedene Möglichkeiten zur Größenanpassung von Hintergrundbildern:

background-size: cover; - Skaliert das Bild so, dass es den gesamten Container ausfüllt
background-size: contain; - Skaliert das Bild so, dass es vollständig in den Container passt
background-size: 200px 150px; - Legt eine spezifische Pixelgröße für das Hintergrundbild fest

Wenn Sie diese HTML-Datei in einem Browser öffnen, sehen Sie drei verschiedene Techniken zur Größenanpassung von Hintergrundbildern.

Hintergrundbild positionieren

In diesem Schritt lernen Sie, wie Sie die Positionierung von Hintergrundbildern mit CSS steuern. Wir werden die Datei styles.html im Verzeichnis ~/project weiter anpassen, um verschiedene Techniken zur Hintergrundpositionierung zu demonstrieren.

Aktualisieren Sie die Datei styles.html mit folgendem Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Positioning</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .top-left {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: top left;
      }

      .center {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: center;
      }

      .bottom-right {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: bottom right;
      }

      .custom-position {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: 20% 80%;
      }
    </style>
  </head>
  <body>
    <div class="image-container top-left">Top Left Position</div>
    <div class="image-container center">Center Position</div>
    <div class="image-container bottom-right">Bottom Right Position</div>
    <div class="image-container custom-position">Custom Position (20% 80%)</div>
  </body>
</html>

Dieses Beispiel demonstriert vier verschiedene Möglichkeiten zur Positionierung von Hintergrundbildern:

background-position: top left; - Positioniert das Bild in der oberen linken Ecke
background-position: center; - Zentriert das Bild innerhalb des Containers
background-position: bottom right; - Positioniert das Bild in der unteren rechten Ecke
background-position: 20% 80%; - Verwendet Prozentwerte für eine benutzerdefinierte Positionierung

Wenn Sie diese HTML-Datei in einem Browser öffnen, sehen Sie, wie sich unterschiedliche Positionierungswerte auf die Platzierung des Hintergrundbildes auswirken.

Hintergrundbildwiederholung steuern

In diesem Schritt lernen Sie, wie Sie die Wiederholung von Hintergrundbildern mit der CSS-Eigenschaft background-repeat steuern. Wir werden die Datei styles.html im Verzeichnis ~/project weiter anpassen, um verschiedene Wiederholungstechniken zu demonstrieren.

Aktualisieren Sie die Datei styles.html mit folgendem Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Repetition</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .repeat {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat;
      }

      .repeat-x {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-x;
      }

      .repeat-y {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-y;
      }

      .no-repeat {
        background-image: url("background-sample.jpg");
        background-size: 200px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container repeat">Repeat (Default)</div>
    <div class="image-container repeat-x">Repeat X (Horizontal)</div>
    <div class="image-container repeat-y">Repeat Y (Vertical)</div>
    <div class="image-container no-repeat">No Repeat</div>
  </body>
</html>

Dieses Beispiel demonstriert vier verschiedene Techniken zur Wiederholung von Hintergrundbildern:

background-repeat: repeat; - Wiederholt das Bild sowohl horizontal als auch vertikal (Standard)
background-repeat: repeat-x; - Wiederholt das Bild nur horizontal
background-repeat: repeat-y; - Wiederholt das Bild nur vertikal
background-repeat: no-repeat; - Verhindert die Wiederholung des Bildes

Wenn Sie diese HTML-Datei in einem Browser öffnen, sehen Sie, wie sich unterschiedliche Wiederholungswerte auf die Anzeige des Hintergrundbildes auswirken.

Mehrere Hintergrund-Eigenschaften kombinieren

In diesem Schritt lernen Sie, wie Sie mehrere Hintergrund-Eigenschaften kombinieren, um komplexere und interessantere Hintergrunddesigns zu erstellen. Wir werden die Datei styles.html im Verzeichnis ~/project modifizieren, um fortgeschrittene Techniken für das Hintergrund-Styling zu demonstrieren.

Aktualisieren Sie die Datei styles.html mit folgendem Inhalt:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Background Properties</title>
    <style>
      .image-container {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
        padding: 20px;
      }

      .multiple-backgrounds {
        background-image:
          linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url("background-sample.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .layered-backgrounds {
        background-image:
          url("small-pattern.jpg"), linear-gradient(to right, #ff6b6b, #4ecdc4);
        background-size:
          100px 100px,
          cover;
        background-position:
          top left,
          center;
        background-repeat: repeat, no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container multiple-backgrounds">
      Overlay Background with Image
    </div>
    <div class="image-container layered-backgrounds">
      Layered Background with Pattern and Gradient
    </div>
  </body>
</html>

small-pattern.jpg befindet sich im Verzeichnis ~/project.

Dieses Beispiel demonstriert zwei fortgeschrittene Hintergrundtechniken:

Mehrere Hintergründe mit Überlagerung:
- Verwendet einen linearen Farbverlauf (linear gradient), um eine halbtransparente Überlagerung zu erstellen
- Kombiniert den Farbverlauf mit einem Hintergrundbild
- Wendet konsistente Größen-, Positions- und Wiederholungseinstellungen an
Geschichtete Hintergründe (Layered Backgrounds):
- Kombiniert ein sich wiederholendes Musterbild mit einem linearen Farbverlauf
- Verwendet unterschiedliche Größen- und Positionierungseinstellungen für jede Hintergrundebene

Wenn Sie diese HTML-Datei in einem Browser öffnen, sehen Sie, wie mehrere Hintergrund-Eigenschaften komplexe und visuell interessante Designs erzeugen können.

Zusammenfassung

In diesem Lab lernten die Teilnehmer, wie sie Hintergrundstile in CSS durch einen umfassenden, schrittweisen Ansatz anwenden. Das Lab behandelte wesentliche Techniken zur Verbesserung des Webseiten-Designs, einschließlich der Einstellung von Hintergrundfarben mit verschiedenen Methoden wie benannten Farben, Hexadezimalcodes und RGB-Funktionen sowie der Untersuchung der Manipulation von Hintergrundbildern.

Die praktischen Übungen zeigten, wie Hintergrundbilder zu HTML-Elementen hinzugefügt, deren Größe, Position und Wiederholung gesteuert und mehrere Hintergrund-Eigenschaften kombiniert werden. Durch praktische Beispiele erwarben die Lernenden praktische Fähigkeiten im Umgang mit CSS, um visuell ansprechende und dynamische Webseiten-Hintergründe mit verschiedenen Styling-Techniken zu erstellen.