CSS Background Image Base64 Generator

CSS Background Image Base64 Generator

Convert images to ready to use CSS background-image declarations with embedded Base64 data URIs. Drop an image above, select the CSS Background output format, and paste the result directly into your stylesheet.

How to Use

1. Drop an image file (PNG, JPG, SVG, WebP, GIF) onto the upload area
2. Select “CSS Background” as the output format
3. Copy the generated CSS declaration
4. Paste it into your stylesheet

The output looks like:

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

When to Use Base64 CSS Backgrounds

Small repeating patterns

Background patterns (dots, stripes, noise textures) are often tiny images (4x4 to 16x16 pixels) tiled with background-repeat. These are ideal for Base64 embedding because the file is under 1 KB, meaning the Base64 string is negligible. The HTTP request for such a small file would cost more than the data transfer.

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

CSS only icons

Pseudo-elements (::before, ::after) can display images via background-image or content: url(...). Base64 data URIs let you use raster images in these contexts without HTML changes:

.external-link::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(data:image/svg+xml;base64,PHN2Zy...);
  background-size: contain;
  margin-left: 4px;
}

Single file deployments

When generating PDFs, email templates, or offline HTML, embedding all images as Base64 creates a self contained file. No broken images from missing references.

Critical CSS

Inlining a small hero background in critical CSS ensures it loads with the first paint, before external stylesheets and images are fetched. This eliminates the flash of unstyled background that happens when the background image is a separate file.

CSS Background Properties with Base64

The data URI works with all CSS background related properties:

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

And in shorthand:

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

Multiple backgrounds also work:

.element {
  background-image:
    url(data:image/svg+xml;base64,...),
    url(data:image/png;base64,...);
}

Performance Considerations

Caching behavior

A Base64 image in CSS cannot be cached independently from the stylesheet. If the stylesheet changes for any reason, the browser re-downloads the entire thing, including the Base64 image data. A separate image file cached with long max-age headers survives stylesheet changes.

Parse time

Browsers parse CSS synchronously. A large Base64 string in CSS delays render because the parser must process the entire string before applying styles. For images over 10-20 KB, this delay becomes measurable.

Gzip compression

Base64 text has high entropy, so it compresses poorly with gzip/brotli. A 10 KB image served as a separate file with Content-Encoding: gzip might compress to 9 KB. The same image as Base64 in CSS produces ~13.3 KB of Base64 text that compresses to ~12.5 KB. The raw binary always wins for larger images.

Recommendation

SVG vs. Base64 for CSS Backgrounds

For vector graphics, you have a choice between Base64 encoded SVG and URL encoded SVG:

/* Base64 SVG */
background-image: url(data:image/svg+xml;base64,PHN2Zy...);

/* URL-encoded SVG (often smaller) */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");

URL encoded SVG is typically 10-30% smaller than Base64 SVG because SVG is already text, and Base64 adds overhead to text data. The URL Encoder can help with the encoding. However, Base64 is more predictable across tools and parsers.

For image encoding in other formats, see Image to Base64, SVG to Base64, or PNG to Base64.