0

What I am meaning when I say "append an image inside text": https://www.youtube.com/watch?v=ervZqx2N-8c

If I have the following code:

<h1><center><a href="https://www.reddit.com/u/mxxxxx/" title="Reddit account">My name</a></center></h1>

I want to apply an image to "my name," so that it looks like the example shown in the Youtube video above. I can easily do this in photoshop. But how would I do this in html/css/javaScript?

Rijad Hadzic
  • 67
  • 1
  • 5

1 Answers1

1

Of course, just use background: -webkit-linear-gradient and -webkit-text-fill-color

    h1 {
      color: red;
      -webkit-text-fill-color: transparent;
      background: -webkit-linear-gradient(transparent, transparent),
                 url(https://cosmos-images2.imgix.net/file/spina/photo/18032/190218-mount-full.jpg?ixlib=rails-2.1.4&auto=format&ch=Width%2CDPR&fit=max&w=835) repeat;
      background: -o-linear-gradient(transparent, transparent);
      -webkit-background-clip: text;
      text-transform: uppercase;
      Font-size:80px;
    }
<h1>Hello World</h1>
GhastlyCode
  • 248
  • 1
  • 11
  • Please consider compatibility, as this may only work in webkit browsers – Zim84 Jan 03 '20 at 14:41
  • 1
    https://caniuse.com/#search=-webkit-text-fill currently available on all but IE 11. Only issue is that it's not a standard feature :) – GhastlyCode Jan 03 '20 at 14:46