HTML - Hintergründe

Arten von Hintergründen

Bei Hintergründen im Webdesign gibt es verschiedene Optionen zur Auswahl. Jede Art bietet unterschiedliche visuelle Möglichkeiten und kann für ansprechende Designs genutzt werden. Hier sind die drei Hauptarten von Hintergründen: Farbhintergründe, Bildhintergründe und Farbverlaufshintergründe.

background-image: url('path/to/image.jpg');

Hintergrundeigenschaften

CSS bietet Eigenschaften zur Steuerung des Aussehens und Verhaltens von Hintergründen. Mit diesen Eigenschaften können Sie die Hintergrundfarbe, das Bild, die Wiederholung, die Position, die Anhaftung und die Größe festlegen. Lassen Sie uns jede dieser Hintergrundeigenschaften genauer betrachten.

.element {
  background-color: #ff0000; /* Rot */
}

.element {
  background-image: url('pfad/zum/bild.jpg');
}

.element {
  background-image: url('pfad/zum/bild.jpg');
  background-repeat: no-repeat;
}

.element {
  background-image: url('pfad/zum/bild.jpg');
  background-position: center center;
}

.element { 
  background-image: url('pfad/zum/bild.jpg'); 
  background-attachment: fixed; 
}

Hintergrund-Kurzschreibweise

CSS bietet die Möglichkeit, mehrere Hintergrundeigenschaften in einer Deklaration mithilfe der Kurzschreibweise background festzulegen. Diese Eigenschaft ermöglicht es, verschiedene hintergrundbezogene Eigenschaften in einer Anweisung zu kombinieren, was Ihren Code lesbarer macht.

Um die Kurzschreibweise background zu verwenden, geben Sie die Werte der einzelnen Hintergrundeigenschaften in einer bestimmten Reihenfolge an. Die Syntax für die Kurzschreibweise background lautet wie folgt:

background: [background-color] [background-image] [background-position] [background-repeat] [background-attachment] [background-size];

body { 
    ...
}

Hier ist die Bedeutung jedes Wertes:

• background-color: Die Farbe des Elementhintergrunds.
• background-image: Die URL des Bildes.
• background-position: Die Position des Bildes.
• background-repeat: Wie sich das Bild wiederholt.
• background-attachment: Wie das Bild mit dem Inhalt scrollt.
• background-size: Die Größe des Bildes.

Bei der Verwendung dieser Kurzschreibweise können Sie Werte weglassen, wenn Sie sie nicht festlegen möchten. Behalten Sie jedoch ihre Reihenfolge bei.

.element {
  background: #f2f2f2 url('path/to/image.jpg') center no-repeat fixed;
}

body { 
    ...
}

In diesem Beispiel:

• #f2f2f2 legt eine hellgraue Farbe für den Hintergrund fest.
• 'path/to/image.jpg' legt eine Bild-URL für den Hintergrund fest.
• center positioniert es in der Mitte seines Elements.
• no-repeat bedeutet, dass es sich nicht wiederholt.
• fixed bedeutet, dass es fixiert bleibt, während der Inhalt scrollt.

Die Verwendung dieser Kurzschreibweise kann Ihnen helfen, präziseren CSS-Code zu schreiben. Sie ist nützlich, wenn Sie mehrere Hintergründe für ein Element in einer Zeile festlegen möchten.

Wenn Sie später nur eine einzelne Eigenschaft nach der Verwendung dieser Kurzschreibweise ändern möchten, müssen Sie alle anderen Werte ebenfalls neu angeben. Alternativ können Sie einzelne Eigenschaften verwenden, um bestimmte Aspekte zu ändern, ohne andere zu beeinflussen.

Mehrere Hintergründe

Mit CSS können Sie mehrere Hintergründe auf einem einzelnen Element übereinander legen. Durch die Angabe mehrerer Hintergrundbilder und -farben können Sie visuelle Effekte erzielen, ohne zusätzliche HTML-Elemente zu benötigen.

Um mehrere Hintergründe auf ein Element anzuwenden, verwenden Sie die background-Eigenschaft oder einzelne Hintergrund-Eigenschaften und trennen Sie jeden Hintergrund mit einem Komma.

.element {
  background: url('image1.jpg') center no-repeat,
              url('image2.jpg') top left repeat,
              linear-gradient(to bottom, #fff, #000);
}

1. image1.jpg ist in der Mitte positioniert und wiederholt sich nicht.
2. image2.jpg ist oben links positioniert und wiederholt sich.
3. Ein linearer Farbverlauf von Weiß zu Schwarz wird als dritter Hintergrund angewendet.

Die Hintergründe werden übereinander geschichtet, wobei der zuerst angegebene Hintergrund die oberste Schicht und der zuletzt angegebene Hintergrund die unterste Schicht bildet.

Sie können auch Hintergrundfarben mit Bildern kombinieren:

.element {
  background: url('image.jpg') center no-repeat,
              #ff0000;
}

In diesem Fall wird die rote Farbe (#ff0000) in Bereichen sichtbar sein, in denen das Bild transparent ist oder nicht alles abdeckt.

Bei der Verwendung mehrerer Hintergründe können Sie die Positionierung, Wiederholung und Größe jedes einzelnen separat steuern:

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-position: center, top right;
  background-repeat: no-repeat, repeat-x;
  background-size: cover, contain;
}

• image1.jpg ist zentriert, wiederholt sich nicht und deckt alles ab.
• image2.jpg ist in der oberen rechten Ecke positioniert, wiederholt sich horizontal und passt sich unter Beibehaltung seines Seitenverhältnisses an.

Durch das Übereinanderlegen mehrerer Hintergründe, wie in den obigen Beispielen gezeigt, können Sie ansprechende Designs erstellen, die Bilder, Farben und Farbverläufe kombinieren. Experimentieren Sie mit verschiedenen Kombinationen und Eigenschaften, um den gewünschten Effekt für Ihre Webseite zu erzielen.

Hintergrundtransparenz

CSS bietet Möglichkeiten, transparente Hintergründe mit RGBA- oder HSLA-Farbwerten zu erstellen. Dies ermöglicht die Kontrolle der Deckkraft des Hintergrunds, wodurch er teilweise oder vollständig transparent wird.

So erstellen Sie einen transparenten Hintergrund mit RGBA:

.element {
  background-color: rgba(255, 0, 0, 0.5);
}

Ebenso können Sie HSLA verwenden, um transparente Hintergründe zu erstellen:

.element {
  background-color: hsla(0, 100%, 50%, 0.5);
}

Durch Anpassung des Alphawertes können Sie steuern, wie durchsichtig Ihre Hintergrundfarbe sein wird. Dies ist hilfreich, wenn Sie Overlays erstellen oder Inhalte unter einem Element anzeigen möchten.

<div class="overlay">
  <h1>Willkommen</h1>
  <p>Dies ist ein Text über einem transparenten Hintergrund.</p>
</div>

<style>
.overlay {
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    padding: 20px;
}
</style>

Bei der Verwendung von durchsichtigen Hintergründen sollten Sie darauf achten, wie gut Ihr Text lesbar ist. Wählen Sie geeignete Farben und Schriftgrößen, damit ausreichend Kontrast zum Hintergrund besteht. Transparente Hintergründe sind nützlich, um ansprechende Designs und Overlays zu erstellen und gleichzeitig darunterliegende Inhalte zu zeigen. Durch die Steuerung der Transparenz mit RGBA- oder HSLA-Werten erhalten Sie genau den richtigen Grad an Durchsichtigkeit für Ihre Designs.

Beispiele und Demonstrationen

Hier sind einige praktische Beispiele für die Verwendung von Hintergründen im Webdesign. Diese Code-Schnipsel und Live-Demonstrationen zeigen, wie Sie verschiedene Arten von Hintergründen und Eigenschaften verwenden können, um ansprechende Designs zu erstellen.

<section class="section-1">
  <h2>Abschnitt 1</h2>
  <p>Dieser Abschnitt hat einen blauen Hintergrund.</p>
</section>

<section class="section-2">
  <h2>Abschnitt 2</h2>
  <p>Dieser Abschnitt hat einen grünen Hintergrund.</p>
</section>

<style>
.section-1 {
  background-color: #2196F3;
  color: #fff;
  padding: 20px;
}

.section-2 {
  background-color: #4CAF50;
  color: #fff;
  padding: 20px;
}
</style>

<section class="hero">
   <h1>Willkommen auf meiner Webseite</h1>
   <p>Dies ist ein Hero-Bereich mit einem Hintergrundbild.</p>
</section>

<style>
.hero {
   background-image: url('pfad/zum/hero-bild.jpg');
   background-size: cover;
   background-position: center;
   height: 400px; 
   display: flex; 
   justify-content: center; 
   align-items: center; 
   color: #fff; 
   text-align: center;
}
</style>  

<section class="gradient-section">
  <div class="overlay">
    <h2>Verlaufsabschnitt</h2>
    <p>Dieser Abschnitt hat Verlaufshintergründe mit durchsichtigen Überlagerungen.</p>
  </div>
</section>

<style>
.gradient-section {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
  padding: 50px;
}
.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px;
  color: #fff;
  text-align: center;
}
</style>