Image as Text Background using CSS background-clip Property

You can set Image as text background of any HTML element using CSS background-clip property, background-clip limits the background image to the content of element.


background-clip property specifies the limit of background of any html element, The default value of background-clip is border-box.


div {
  background-color: blue;
  background-clip: padding-box;


The HTML code is given below, The image background is set for h1 element.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Image as Text Background</title>
    <link rel="stylesheet" href="style.css">
    <h1>How To Code School</h1>    

CSS Code

Using CSS the element is aligned in center both vertically and horizontally, then the image (bg.jpg) is set as background of h1 element and it is clipped to limit the image to the content, i.e text inside h1 element.

Color of text is set to transparent to make the background image visible.

    padding: 0;
    margin: 0;
    font-family: fantasy;
    font-size: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #000;
    text-transform: uppercase;
    background-image: url(bg.jpg);
    background-clip: text;
    color: transparent;

Video Tutorial