Sie denken vielleicht, dass Hintergrunddesign einfach ist, aber CSS hat viele obskure und mächtige Eigenschaften, die Sie lernen müssen.

Das Hintergrundthema Ihrer Website kann das Erscheinungsbild erheblich beeinflussen. Farben, Bilder und Hintergrundmuster rufen Emotionen hervor und schaffen großartige Benutzererlebnisse.

Sie können CSS-Hintergrundeigenschaften verwenden, um den Hintergrundstil von HTML-Elementen festzulegen. Erfahren Sie alles über einige der CSS-Eigenschaften, mit denen Sie hervorragende Hintergründe erstellen können.

1. Hintergrundfarbe

Der background-color-Eigenschaft legt die Farbe des Hintergrunds eines Elements fest. Sie können die Farbe mit einem Namen wie "rot", einem HEX-Wert wie "#00FF00" oder einem RGB-Wert wie "rgb (0, 255, 0)" festlegen. Sie können auch einen HSL-Wert verwenden, um die Hintergrundfarbe mithilfe von Farbton, Sättigung und Helligkeit festzulegen.

Im folgenden Beispiel wird die Hintergrundfarbe der gesamten Seite auf Orange gesetzt. Die Überschriftenelemente erhalten jeweils einen anderen Hintergrund.

instagram viewer 
<Körper>
<h2>Ich bin Grünh2>
<h3>Ich bin Roth3>
<h4>Ich bin blauh4>
Körper>

Mit CSS können Sie jedem Element eine eindeutige Hintergrundfarbe zuweisen:

Körper {
Hintergrundfarbe: orange;
}
h2 {
Hintergrundfarbe: #006600;
}


h3 {
Hintergrundfarbe: rgb(128, 0, 0);
}
h4{
Hintergrundfarbe: hsl(240, 100%, 50%);
}

Dadurch wird die Seite so gestaltet, dass sie wie folgt aussieht:

Mit der Eigenschaft opacity können Sie die Transparenz eines Elements bestimmen. Opazität nimmt Werte zwischen 0,0 und 1,0 an. Je niedriger der Wert, desto transparenter ist das Element.

Versuchen Sie beispielsweise, die Deckkraft eines Body-Elements auf 0,5 einzustellen:

Körper {
Hintergrundfarbe:orange;
Opazität:0.5;
}

Dies wird wie folgt angezeigt – vergleichen Sie die Farben mit denen im vorherigen Screenshot:

2. Hintergrundbild

Die Eigenschaft background-image legt ein Bild als Hintergrund eines Elements fest. Sie können auf ein lokales Bild oder eines aus dem Internet verweisen.

<Körper>
 <h1>HalloDort!h1>
 <P>ICHhabeneinBildInMeinHintergrund!P>
Körper>

Die CSS-Datei:

Körper {
Hintergrundbild:url("https://Bilder.Pexels.com/Fotos/1191710/pexels-foto-1191710.jpeg?Auto=Kompresse&cs=winzigesrgb&w=1260&H=750&dpr=1");
}

Dies wird wie folgt angezeigt:

Sie können auch verwenden Hintergrundverläufe um einen einzigartigen Look für Ihre Anwendung zu schaffen.

3. Hintergrund Wiederholung

Die Eigenschaft background-image wiederholt Bilder standardmäßig. Sie können wählen, ob das Bild horizontal auf der x-Achse oder vertikal auf der y-Achse wiederholt werden soll.

Wenn eine Wiederholung nicht zu Ihrem Stil passt, können Sie sie alternativ mit dem Wert entfernen keine Wiederholung.

<Körper>
<h1>Hallo!h1>
<h3>Ich demonstriere die Wiederholungs-Hintergrund-Wiederholungseigenschaft auf der x-Achse!h3>
Körper>

Verwenden Sie das folgende CSS, um einen sich wiederholenden Hintergrund entlang der x-Achse anzuwenden:

Körper {
Hintergrundbild: URL("https://Bilder.Pexels.com/Fotos/459335/pexels-foto-459335.jpeg?Auto=Kompresse&cs=winzigesrgb&w=1260&H=750&dpr=1");
Hintergrund Wiederholung: Wiederholung-x;
}

Das Ergebnis:

Versuchen Sie als Nächstes, das Bild auf der Y-Achse zu wiederholen:

Körper {
Hintergrundbild:url("https://cdn.pixabay.com/Foto/2016/04/18/22/05/Muscheln-1337565__340.jpg");
Hintergrund Wiederholung:wiederhole-y;
}

Das Ergebnis:

Das Beispiel auf der y-Achse sieht sicherlich verzerrt aus. Wenn dies nicht die Muster sind, nach denen Sie suchen, können Sie sie angeben keine Wiederholung stattdessen:

Körper {
Hintergrundbild:url("https://Bilder.Pexels.com/Fotos/259915/pexels-foto-259915.jpeg?Auto=Kompresse&cs=winzigesrgb&w=600");
Hintergrund Wiederholung:keine Wiederholung;
}

Das Ergebnis:

4. Hintergrund-Position

Die Eigenschaft background-position definiert die Position des Hintergrundbilds innerhalb seines Elements. Es verwendet positionsspezifische Schlüsselwörter wie Center, Spitze, Und Unterseite, oder ein Pixel- oder Prozentwert.

Fügen Sie dem letzten Bild eine Eigenschaft background-position hinzu:

Körper {
Hintergrundbild: URL("https://Bilder.Pexels.com/Fotos/259915/pexels-foto-259915.jpeg?Auto=Kompresse&cs=winzigesrgb&w=600");
Hintergrund-Position: SpitzeCenter;
}

Es wird so aussehen:

Sie können sehen, dass das Bild das Aussehen der Website verzerrt. Lassen Sie uns das mit der nächsten Eigenschaft beheben.

5. Hintergrundgröße

Sie können die Eigenschaft Hintergrundbild verwenden, um eine bestimmte Größe für das Bild festzulegen. Es verwendet Schlüsselwörter wie Abdeckung Und enthalten oder ein Pixel- oder Prozentwert. Lassen Sie uns das verzerrte Hintergrundbild korrigieren, indem wir eine Eigenschaft für die Hintergrundgröße hinzufügen.

Körper {
 Hintergrundbild: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 Hintergrundwiederholung: keine Wiederholung;
 Hintergrundposition: Mitte;

Das Ergebnis zeigt, dass das Bild nun die Webseite proportional abdeckt.

6. Hintergrund-Anhang

Die Eigenschaft background-attachment definiert, ob die Position des Hintergrundbilds fixiert bleibt oder scrollt. Sie können die Schlüsselwörter Fixed oder Scroll verwenden.

Lassen Sie uns das im folgenden Code zeigen:

<Körper>
<h1>Die background-attachment-Eigenschafth1>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
<P>Bei der fixierten Anhangseigenschaft werden Sie feststellen, dass sich der Hintergrund nicht mit dem Text bewegt.P>
Körper>

Die CSS-Datei:

Körper {
Hintergrundbild: URL("https://Bilder.Pexels.com/Fotos/96627/pexels-foto-96627.jpeg?Auto=Kompresse&cs=winzigesrgb&w=600");
Hintergrund Wiederholung: keine Wiederholung;
Hintergrund-Position: Center;
Hintergrundgröße: Abdeckung;
Hintergrund-Anhang: Fest;
}

Wenn Sie die Seite nach unten bewegen, werden Sie feststellen, dass sich der Hintergrund nicht bewegt:

Um die Eigenschaft scroll background-attachment zu demonstrieren, ändern Sie das Schlüsselwort in scrollen. Sie werden feststellen, dass sich der Hintergrund jetzt mit dem Text bewegt.

Körper {
Hintergrundbild: URL("https://Bilder.Pexels.com/Fotos/96627/pexels-foto-96627.jpeg?Auto=Kompresse&cs=winzigesrgb&w=600");
Hintergrund Wiederholung: keine Wiederholung;
Hintergrund-Position: Center;
Hintergrundgröße: Abdeckung;
Hintergrund-Anhang: scrollen;
}

7. Die Hintergrund-Kurzschrift-Eigenschaft

Möglicherweise stellen Sie fest, dass Sie mehrere Eigenschaften einbeziehen müssen, um den perfekten Hintergrund zu erhalten. Dazu muss viel Code geschrieben werden. Sie können den Code jedoch mithilfe der Hintergrund-Kurzschrifteigenschaft kürzen.

Mit der Kurzschrifteigenschaft können Sie viele Hintergrundeigenschaften in einer einzigen Zeile festlegen. Sie verwenden das Schlüsselwort Hintergrund um die Kurzschrifteigenschaft festzulegen.

Anstatt beispielsweise Code wie diesen zu schreiben:

Körper {
Hintergrundfarbe: Grün;
Hintergrundbild: URL("laptop3.jpg");
Hintergrund Wiederholung: keine Wiederholung;
Hintergrundgröße: Abdeckung;
Hintergrund-Anhang: scrollen;
Hintergrund-Position: Center;
}

Sie können es in einer einzigen Zeile schreiben, wie folgt:

Körper {
Hintergrund: GrünURL("laptop3.jpg") keine WiederholungAbdeckungscrollenCenter;
}

Die Kurzschrifteigenschaft folgt einer bestimmten Reihenfolge. Sie müssen die Eigenschaften in dieser Reihenfolge ausrichten, auch wenn eine oder mehrere fehlen. Die Reihenfolge ist:

  • Hintergrundfarbe
  • Hintergrundbild
  • Hintergrund Wiederholung
  • Hintergrund-Anhang
  • Hintergrund-Position

Sie können interessante Designs mit CSS erstellen, indem Sie verschiedene verwenden Hintergrundmuster. Mit diesen Mustern können Sie einzigartige und herausragende Hintergründe für Ihre Website erzielen.

Andere Hintergrundeigenschaften in CSS

CSS ist leistungsfähig und Sie können damit eine Menge tun, um Ihre Anwendung aufzupeppen. Sie können Eigenschaften wie background-clip, background-origin und background-blend-mode verwenden, um eine Animation hinzuzufügen.

Sie können auch Farbverläufe und Muster verwenden, um Ihre Seiten anzupassen. Experimentieren Sie mit CSS-Hintergrundeigenschaften, um Ihre Webdesign-Fähigkeiten zu verbessern.