Creating text with integrated background

If you're looking for a very modern and effective way to style your headings, take the time to see how using a background to style the color of your text can be incredibly innovative.

You can find the entire tutorial on our Instagram account

Step 1

Let's start by creating the HTML structure of our heading.

<div class="banner">
        <h1 class="banner-title">BELIEVEMY</h1>
    </div>

We can easily omit the banner class if you want your background to take the full width of your text; you need to wrap it like this.

Step 2

Now, let's horizontally and vertically center the title within the banner class using flexbox:

.banner {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 400px;
      background-color: #131416;
    }

Step 3

We just need to add the background to our banner-title class:

.banner-title {
      font-size: 7em;
      font-family: arial;
      background-image: url('banner.png');
      background-size: cover;
      background-position: center;
    }

But the result is not there yet. For now, we do have a background behind our text, but we're far from the desired outcome! Let's fix this problem with the secret ingredient.

Step 4

Simply use background-clip to define how the background extends: here, we specify that the background stops at the text, not at 100% of the div.

.banner-title {
      /* What we had in the previous step */
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

Then, by setting the color to transparent, we make our magnificent background appear on our superb title.

This trick is incredibly effective for website titles.