0

I used the Unicode ⬢ and I want that the hexagon have a picture as background and I don't know how I do that. I tried already to put the Unicode in a span and in the span the background, but it doesn't work

Robin hpf
  • 9
  • 1
  • 1
    why not creating an hexagon shape instead? https://stackoverflow.com/questions/17896791/hexagon-shape-with-css3 – Temani Afif Jun 22 '22 at 19:34
  • Why not `position` it over an image? – IT goldman Jun 22 '22 at 19:36
  • 1
    Do you want, that the content of the character has a specific background? If yes it is a duplicate to [Use text as a mask on background image](https://stackoverflow.com/questions/11924800/use-text-as-a-mask-on-background-image) – t.niese Jun 22 '22 at 19:50

1 Answers1

0

background-clip has a possible value text. This is non standard apparently but it is supported nowadays (albeit with the -webkit- prefix) in the most popular browsers.

If you make the text color transparent then the background image you have given its container will show through.

Here's a simple example with your Unicode hexagon (shown large so the background image can be seen).

span {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 100px;
  background-color: red;
  background-image: url(https://picsum.photos/id/1015/100/100);
}
<span>&#x2B22;</span>
A Haworth
  • 30,908
  • 4
  • 11
  • 14