Base64 in CSS
Any CSS property that accepts url() also accepts a data URI, so small images and fonts can live inside the stylesheet itself. Pick a property for syntax and examples.
background-imageHow to use a Base64-encoded image as a CSS background-image with a data URI, including multiple backgrounds and fallbacks.backgroundUse a Base64 data URI inside the CSS background shorthand property, together with color, position and repeat values.border-imageCreate decorative borders from a Base64-encoded image using CSS border-image and a data URI.cursorUse a Base64-encoded PNG, SVG or CUR image as a custom mouse cursor in CSS with a data URI.list-style-imageReplace list bullets with a Base64-encoded image using the CSS list-style-image property and a data URI.list-styleSet a Base64 image bullet with the CSS list-style shorthand, together with list-style-type fallback and position.
General syntax
selector {
property: url("data:<mime type>;base64,<Base64 data>");
}Generate the full declaration with the Image to Base64 converter (choose “CSS background-image” as the output), or convert a whole stylesheet at once with the CSS Data URI Converter.
Comments (0)
Questions, ideas or a bug in “Base64 in CSS”? Leave a comment, rate the tool, or reply to others.
No comments yet. Be the first to share your feedback!