title: How can I fill a text with an image in HTML?
body: <p>Let's say I have an image like this:</p>
  
  <p><img src="https://i.stack.imgur.com/n8gtc.jpg" height="200"/></p>
  
  <p>and I want to fill an <code>&lt;h1&gt;</code> tag with that image to look something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Ufieg.png" height="120"/></p>
  
  <p>I guess I could do something like this to start...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    width: 100%;
    height: 100%;
    background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
    background-size: cover;
  }
  
  h1 {
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;h1&gt;404&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Should I have another 'absolute' div white covering the image and a transparent font over? Does anyone know how to accomplish this?</p>