CSS

How to Add Image in Text Background in HTML using CSS

In this article, we will set the image in the text background using HTML and CSS. let’s see what CSS property is used for it.

HTML Code: First, We will write HTML code to create a basic structure of the body. In the following code, we will use heading tag to write one line content.

<!DOCTYPE html>
<html>  
  <head>
    <title>How to add the image in text background using CSS?</title>
  </head>
  <body>
    <h1>THECODEHUBS</h1>
  </body>
</html>

CSS Code: Let’s see what the CSS property is used to set the image as background in the text. we can use the background-image property to set an image as background, the -webkit-text-fill-color property to give the text a transparent color, the background image will show through the text, thus completing the clipping effect.

<style>
  h1 {
    background-image: url(http://staging.thecodehubs.com/wp-content/uploads/2022/02/how-to-add-image-in-text-background-in-html-using-css-1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 200px;
    font-size: 120px;
    text-align: center;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 800;
    -webkit-font-smoothing: antialiased;
  }
</style>

Complete Code: In this section, we will combine the above codes for the demo.

<!DOCTYPE html>
<html>
<head>
    <title>How to add the image in text background using CSS?</title>
  <style>
    h1 {
      background-image: url(http://staging.thecodehubs.com/wp-content/uploads/2022/02/how-to-add-image-in-text-background-in-html-using-css-1.jpg);
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-top: 200px;
      font-size: 120px;
      text-align: center;
      text-transform: uppercase;
      font-family: sans-serif;
      font-weight: 800;
      -webkit-font-smoothing: antialiased;
      background-size: cover;
      background-position: center center;
    }
  </style>
</head>  
<body>
    <h1>THECODEHUBS</h1>
</body>
</html>

Output: