1. Tutorials
  2. CSS
  3. Image as Text Background

Video as Text Background

In this tutorial, you will learn how to set an image as text background with CSS. Watch the video below for a detailed tutorial.

HTML

<body>
  <h1>Lorem</h1>
</body>

CSS

body {
  margin: 0;
  background-color: #7d8b8f;
  font-family: 'Oswald', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  position: relative;
  color: white;
  font-size: 11em;
  text-transform: uppercase;

  background-image: url(image.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased;
}

Image Source

https://unsplash.com/photos/j4glkaOX-ds?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink