CODEWITHSUNDEEP
css
MrQd
MrQd

Reputation: 43

How to use an unicode character instead of a background image?

I want to replace the background-image:url(image.png) by an Unicode character or icon like "\xxxxx" in css

How to make it?

Upvotes: 4

Views: 9589

Answers (2)

NVRM
NVRM

Reputation: 13129

We could pass a SVG containing a <text> 🛸 as a data URL, like so:

body {
  height: 100%;
  background: #272b2d;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 100'><text y='50%'>🛠</text></svg>");
  background-size: cover;
  background-position: calc(50vw - 4em) -1em;
}

Upvotes: 1

Paweł Michalski
Paweł Michalski

Reputation: 232

How about using pseudo elements?

I suggest using 

:before

width z-index: -1;

Check my exmple here: https://jsfiddle.net/oyq47zsj/

I used "A" as background, but you can use any char

Upvotes: 1

Related Questions