Base64 in CSS background
The background shorthand accepts a data URI exactly like background-image, and lets you set color, position, size and repeat in one declaration.
Example
.notice {
background: #fffbe6 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAK...") no-repeat 12px center / 16px 16px;
padding-left: 40px;
}Live demo
Notes
- The shorthand resets every background sub-property you do not specify.
- Put the color first or last; the order of the other values is flexible except that size must follow position with a slash.
Comments (0)
Questions, ideas or a bug in “Base64 in CSS background”? Leave a comment, rate the tool, or reply to others.
No comments yet. Be the first to share your feedback!