CSS Almanac → Properties → B → background-image

background-image

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Die CSS-Eigenschaft background-image wendet eine Grafik (z. B. PNG, SVG, JPG, GIF, WEBP) oder einen Farbverlauf auf den Hintergrund eines Elements an.

Es gibt zwei verschiedene Arten von Bildern, die Sie mit CSS einfügen können: reguläre Bilder und Farbverläufe.

Bilder

Die Verwendung eines Bildes als Hintergrund ist ziemlich einfach

body {
  background: url(sweettexture.jpg);
}

Der Wert url() ermöglicht es Ihnen, einen Dateipfad zu einem beliebigen Bild anzugeben, und es wird als Hintergrund für dieses Element angezeigt.

Sie können auch eine Daten-URI für url() festlegen. Das sieht so aus

body {
  /* Base64 encoded transparent gif */
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Diese Technik reduziert eine HTTP-Anfrage, was gut ist. Es gibt jedoch eine Reihe von Nachteilen. Bevor Sie also alle Ihre Bilder ersetzen, stellen Sie sicher, dass Sie alle Vor- und Nachteile von Daten-URIs berücksichtigen.

Sie können background-image auch verwenden, um Bilder zu spriten, was eine weitere nützliche Methode zur Reduzierung von HTTP-Anfragen ist.

Verläufe

Eine weitere Option bei der Verwendung von Hintergründen ist, dem Browser mitzuteilen, dass er einen Farbverlauf erstellen soll. Hier ist ein super-duper einfaches Beispiel für einen linearen Farbverlauf

body {
  background: linear-gradient(black, white);
}

Sie können auch radiale Farbverläufe verwenden

body {
  background: radial-gradient(circle, black, white);
}

Technisch gesehen sind Farbverläufe nur eine weitere Form von Hintergrundbild. Der Unterschied ist, dass der *Browser* das Bild für Sie erstellt. Hier ist ein kompletter Leitfaden zur Erstellung und Verwendung.

Das obige Beispiel verwendet nur einen Farbverlauf, aber Sie können auch mehrere Farbverläufe übereinanderlegen. Es gibt einige ziemlich erstaunliche Muster, die Sie mit dieser Technik erstellen können.

Festlegen einer Fallback-Farbe

Wenn ein Hintergrundbild nicht geladen werden kann oder Ihr Farbverlauf-Hintergrund in einem Browser angezeigt wird, der keine Farbverläufe unterstützt, sucht der Browser nach einer Hintergrundfarbe als Fallback. Sie können Ihre Fallback-Farbe wie folgt angeben

body {
  background: url(sweettexture.jpg) blue;
}

Mehrere Hintergrundbilder

Sie können mehrere Bilder oder eine Mischung aus Bildern und Farbverläufen für Ihren Hintergrund verwenden. Mehrere Hintergrundbilder werden jetzt gut unterstützt (alle modernen Browser und IE9+ für Grafiken, IE10+ für Farbverläufe).

Wenn Sie mehrere Hintergrundbilder verwenden, beachten Sie, dass es eine etwas kontraintuitive Stapelreihenfolge gibt. Listen Sie das Bild, das vorne liegen soll, zuerst auf und das Bild, das hinten liegen soll, zuletzt, wie hier

body {
  background: url(logo.png), url(background-pattern.png);
}

Wenn Sie mehrere Hintergrundbilder verwenden, müssen Sie oft mehr Werte für den Hintergrund festlegen, um alles an den richtigen Platz zu bringen. Wenn Sie die background-Kurzschreibweise verwenden möchten, können Sie die Werte für jedes Bild einzeln festlegen. Ihre Kurzschreibweise wird etwa so aussehen (beachten Sie das Komma, das das erste Bild und seine Werte von dem zweiten Bild und seinen Werten trennt)

body {
  background:
    url(logo.png) bottom center no-repeat,
    url(background-pattern.png) repeat;
}

Es gibt keine Begrenzung, wie viele Hintergrundbilder Sie festlegen können, und Sie können coole Dinge tun, wie z. B. Ihre Hintergrundbilder animieren. Es gibt ein gutes Beispiel für mehrere Hintergrundbilder mit Animation auf David Walshs Blog.

Demo

Browser-Unterstützung

IEEdgeChromeFirefoxSafariOpera
AlleAlleAlleAlleAlleAlle
iOS SafariChrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
AlleAlleAlle90+62+
Quelle: caniuse

Unterstützung für Hintergrundbild-Farbverläufe

IEEdgeChromeFirefoxSafariOpera
10+AlleAlle3.6+4+11.5+
iOS SafariChrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
AlleAlleAlle90+62+
Quelle: caniuse

Unterstützung für Hintergrundbild-SVGs

IEEdgeChromeFirefoxSafariOpera
9+Alle8+4+5+Alle
iOS SafariChrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
5+AlleAlle90+62+
Quelle: caniuse

Weitere Informationen

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. Bret
    Permalink to comment#

    Mit dieser Methode – ich möchte die oberste Ebene auf mobiler Breite ausblenden. Ich wiederhole den Hintergrundstapel – aber mit der gelöschten obersten Ebene – und sie erscheint immer noch? Als ich die Deckkraft zum Ausblenden verwendete, wirkte sie sich auf alle Ebenen aus.

    #F3-Col1-Row1 {
        padding:77px 0px;
        background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/banners/Dash_mob_resp_med.png) no-repeat scroll right bottom, url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
        background-size: contain;
        @media only screen (max-width: 959px) {
            padding:33px 0px!important;
            background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
            background-size: contain;
        }
        @media only screen (max-width: 580px) {
            padding:33px 0px!important;
        }
        #F6-Col1-Row1 {
            padding-top: 50px;
        }

}
    Antworten
  2. asdf
    Permalink to comment#

    function example() {
    element.innerHTML = “#F3-Col1-Row1 {
    padding:77px 0px;
    background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/banners/Dash_mob_resp_med.png) no-repeat scroll right bottom, url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
    background-size: contain;
    @media only screen (max-width: 959px) {
    padding:33px 0px!important;
    background: url(https://webassets.ssisurveys.com/savewithsurveys/panel/spot_art/green_top_bar.png) 2000px bottom #a4cb5a!important;
    background-size: contain;
    }
    @media only screen (max-width: 580px) {
    padding:33px 0px!important;
    }
    #F6-Col1-Row1 {
    padding-top: 50px;
    }

    }”;
    }

    Antworten
  3. Angelo
    Permalink to comment#

    Ausgezeichnet.

    Ich fange mit JEE an und habe durch das Lesen dieses Artikels mein Wissen stark verbessert.

    Jetzt kann ich den Mechanismus, wie man in dieser Umgebung programmiert, besser verstehen

    Antworten
  4. Elmo
    Permalink to comment#

    kannst du mir sagen, wie ich nach Sesame Street komme?

    Antworten
  5. Paul
    Permalink to comment#

    Ich liebe den Hintergrund dieser Seite. Ich würde gerne wissen, welchen CSS-Code man verwenden muss, um einen ähnlichen Effekt zu erzielen…

    Antworten
    • Clay
      Permalink to comment#

      Klicken Sie mit der rechten Maustaste auf den Hintergrund und wählen Sie „inspizieren“ / „Element inspizieren“ / usw., um den verwendeten Code anzuzeigen. In diesem Fall sieht es so aus, als hätte er ein Base64-kodiertes SVG verwendet

      background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8+CgkJCTxmZUNvbXBvc2l0ZSBpbjI9J3Jlc3VsdDUnIG9wZXJhdG9yPSdpbicgaW49J1NvdXJjZUdyYXBoaWMnIHJlc3VsdD0ncmVzdWx0NicgaWQ9J2ZlQ29tcG9zaXRlMzEyMScgLz4KCQkJPGZlTW9ycGhvbG9neSBpbj0ncmVzdWx0Nicgb3BlcmF0b3I9J2RpbGF0ZScgcmFkaXVzPScxMCcgcmVzdWx0PSdyZXN1bHQzJyBpZD0nZmVNb3JwaG9sb2d5MzEyMycgLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgZmlsbD0nI2VlZWVlZScvPiAgICAgCgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4PScwJyB5PScwJyBpZD0ncmVjdDI5ODUnIHN0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSkgJy8+Cjwvc3ZnPg==);

  6. Joshua
    Permalink to comment#

    Wie kann ich ein auf meinem PC gespeichertes Bild als Hintergrundbild verwenden?

    Antworten
  7. nitin maurya
    Permalink to comment#

    Ausgezeichnet.
    Ich liebe den Hintergrund dieser Seite.

    Antworten
  8. luis
    Permalink to comment#

    Ich verwende den richtigen Pfad, um das Hintergrundbild auf der lokalen Website einzufügen, aber das Bild wird nicht angezeigt. Ich weiß nicht warum, ich habe alles versucht, es funktioniert einfach nicht.

    Antworten
  9. luis
    Permalink to comment#

    gelöst (../image
    die 2 Punkte und der Schrägstrich lösen das Problem!

    Antworten
  10. Nirmit
    Permalink to comment#

    Hallo, ich weiß nicht, wie ich den Pfad des Bildes in der URL angeben soll... kann mir jemand helfen?

    Antworten
  11. Ali Haider
    Permalink to comment#

    Wie setze ich ein Hintergrundbild über die Quelle (src) anstatt über url?

    Antworten
    • Geoff Graham
      Permalink to comment#

      Leider ist src() kein Teil der background-image-Syntax.

  12. Vedha Peri
    Permalink to comment#

    Tatsächlich funktioniert es, wenn Sie den Pfad Ihres Bildes in url() angeben. Stellen Sie sicher, dass Sie den richtigen Pfad zum Bild angeben. Mein Bild wurde im selben Verzeichnis wie mein HTML gespeichert, in einem anderen Ordner namens assets.

    Antworten
  13. Linpi
    Permalink to comment#

    In einer CSS-Datei habe ich das hier gefunden
    background-image: url(https://c.pxhere.com/photos/4f/ee/candy_toppings_sweet_colorful_sugar-883692.jpg!d);
    was bedeutet !d am Ende?

    Antworten
  14. David Spector
    Permalink to comment#

    „Festlegen einer Fallback-Farbe“ funktioniert bei mir nicht. Beim Aktualisieren blitzt immer die Farbe auf, bevor das Bild angezeigt wird. Möglicherweise ein Fehler in Firefox und Chrome?

    Antworten

Antwort hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

© .