Is it possible append an image inside text in html,css,or javascript, without photoshop?

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?

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    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;
    }

<!-- language: lang-html -->

<h1>Hello World</h1>

<!-- end snippet -->