CSS-Hintergrundbild - So fügen Sie Ihrer Div eine Bild-URL hinzu

Angenommen, Sie möchten ein oder zwei Bilder auf einer Webseite platzieren. Eine Möglichkeit besteht darin, die background-imageCSS-Eigenschaft zu verwenden.

Diese Eigenschaft wendet ein oder mehrere Hintergrundbilder auf ein Element wie a an , wie in der Dokumentation erläutert. Verwenden Sie es aus ästhetischen Gründen, z. B. um Ihrer Webseite einen strukturierten Hintergrund hinzuzufügen.

Fügen Sie ein Bild hinzu

Mit der background-imageEigenschaft können Sie ganz einfach ein Bild hinzufügen . Geben Sie einfach den Pfad zum Bild im url()Wert an.

Der Bildpfad kann eine URL sein, wie im folgenden Beispiel gezeigt:

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

Oder es kann ein lokaler Pfad sein. Hier ist ein Beispiel:

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

Fügen Sie mehrere Bilder hinzu

Sie können mehrere Bilder auf die background-imageEigenschaft anwenden .

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 

Das ist viel Code. Lassen Sie es uns zusammenfassen.

Trennen Sie jeden Bildwert url()durch ein Komma.

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

Positionieren und verbessern Sie nun Ihre Bilder, indem Sie zusätzliche Eigenschaften anwenden.

background-repeat: no-repeat, no-repeat; background-position: right, left; 

Es gibt mehrere Untereigenschaften, die Sie Ihren Hintergrundbildern hinzufügen können, z. B. background-repeatund background-position, die wir im obigen Beispiel verwendet haben. Sie können einem Hintergrundbild sogar Farbverläufe hinzufügen.

Sehen Sie, wie es aussieht, wenn wir alles zusammenfügen.

Bestellangelegenheiten

Die Reihenfolge, in der Sie Ihre Bilder auflisten, ist aufgrund der Stapelreihenfolge von Bedeutung. Das heißt, das erste aufgelistete Bild ist dem Benutzer gemäß der Dokumentation am nächsten. Dann der nächste und der nächste und so weiter.

Hier ist ein Beispiel.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 

Wir haben im obigen Code zwei Bilder aufgelistet. Das erste Bild (marokko-blau.png) befindet sich vor dem zweiten (oriental-tiles.png). Beide Bilder haben die gleiche Größe und keine Deckkraft, daher sehen wir nur das erste Bild.

Wenn wir jedoch das zweite Bild (oriental-tiles.png) um 200 Pixel nach rechts verschieben, können Sie einen Teil davon sehen (der Rest bleibt verborgen).

So sieht es aus, wenn wir alles zusammenfügen.

Wann sollten Sie ein Hintergrundbild verwenden?

Es gibt viel zu mögen an der background-imageImmobilie. Aber es gibt einen Nachteil.

Das Bild ist möglicherweise nicht für alle Benutzer zugänglich, wie in der Dokumentation angegeben, beispielsweise für Benutzer, die Bildschirmleseprogramme verwenden.

Dies liegt daran, dass Sie der background-imageEigenschaft keine Textinformationen hinzufügen können . Infolgedessen wird das Bild von Bildschirmlesern übersehen.

Verwenden Sie die background-imageEigenschaft nur, wenn Sie Ihrer Seite eine Dekoration hinzufügen müssen. Verwenden Sie andernfalls das HTML- Element, wenn ein Bild eine Bedeutung oder einen Zweck hat, wie in der Dokumentation angegeben.

Auf diese Weise können Sie einem Bildelement mithilfe des altAttributs, das das Bild beschreibt , Text hinzufügen . Der bereitgestellte Text wird von Bildschirmlesern aufgenommen.

Stellen Sie sich das so vor: background-imageIst eine CSS-Eigenschaft, und CSS konzentriert sich auf Präsentation oder Stil. HTML konzentriert sich auf Semantik oder Bedeutung.

Wenn es um Bilder geht, haben Sie Optionen. Wenn ein Bild für die Dekoration benötigt wird, ist die background-imageImmobilie möglicherweise eine gute Wahl für Sie.

Ich schreibe über das Programmierenlernen und die besten Methoden ( amymhaddad.com).