CSS Background Image Base64 Generator

CSS Background Image Base64 Generator

Konvertiere Bilder in fertige CSS background-image-Deklarationen mit eingebetteten Base64 Data URIs. Ziehe ein Bild in das Feld oben, wähle das Ausgabeformat CSS Background und füge das Ergebnis direkt in dein Stylesheet ein.

Wie man es verwendet

1. Ziehe eine Bilddatei (PNG, JPG, SVG, WebP, GIF) in den Upload-Bereich
2. Wähle “CSS Background” als Ausgabeformat
3. Kopiere die generierte CSS-Deklaration
4. Füge sie in dein Stylesheet ein

Die Ausgabe sieht so aus:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...);

Wann man Base64 CSS-Hintergründe verwendet

Kleine sich wiederholende Muster

Hintergrundmuster (Punkte, Streifen, Textureffekte) sind normalerweise sehr kleine Bilder (4x4 bis 16x16 Pixel), die mit background-repeat gekachelt werden. Sie sind ideal für Base64-Einbettung, weil die Datei unter 1 KB liegt.

.pattern {
  background-image: url(data:image/png;base64,iVBOR...);
  background-repeat: repeat;
  background-size: 8px 8px;
}

CSS-only Symbole

Pseudoelemente (::before, ::after) können Bilder mit background-image oder content: url(...) anzeigen. Base64 Data URIs ermöglichen die Verwendung von Rasterbildern in diesen Kontexten ohne HTML-Änderungen.

Einzeldatei-Auslieferungen

Beim Generieren von PDFs, E-Mail-Vorlagen oder Offline-HTML erstellt das Einbetten aller Bilder als Base64 eine eigenständige Datei. Keine defekten Bilder durch fehlende Referenzen.

Kritisches CSS

Das Einbetten eines kleinen Hero-Hintergrunds in kritisches CSS stellt sicher, dass er beim ersten Paint geladen wird. Dies eliminiert den Flash des ungestylten Hintergrunds, der auftritt, wenn das Hintergrundbild eine separate Datei ist.

CSS-Hintergrundeigenschaften und Base64

Der Data URI funktioniert mit allen CSS-Eigenschaften, die mit Hintergründen zu tun haben:

.element {
  background-image: url(data:image/png;base64,...);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}