Image Inside Text using CSS

This CSS code snippet helps you to place image inside text. It works by overlaying text on a background image. The main functionality is to display text with the image as its background, giving a captivating visual effect. It is helpful for creating eye-catching text elements on a webpage.

Moreover, you can use this code in website header, banners, or promotional content to make your text visually engaging. It enhances user experience, capturing attention with a unique text-image effect.

How to Create Image Inside Text Using CSS

1. Start by creating the HTML structure. You’ll need a container div to hold your text and a section where you want to apply the effect. Here’s a sample structure:

<div class="container">
  <div id="real">HYPNOTIZE</div>
</div>
<section class="about"></section>

2. To achieve the desired look, import a suitable font using Google Fonts. Add this line of code to the head section of your HTML document:

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

3. Now, let’s create the CSS rules to transform your text into an image background. Copy and paste the following CSS code into your stylesheet:

body{
  font-family: 'Anton', sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
}
.container {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #fff url('IMAGE_URL') no-repeat fixed center;
  
/*  This is what transforms the background from image to a chosen color (mine is white OR #fff)
    some browsers do not support this function so a webkit property is need (as stated below).
    Now set the text to have a color of transparent. Follow link https://css-tricks.com/how-to-do-knockout-text/
*/
  background-clip: text;
  -webkit-background-clip: text;
  
}
#real {
  font-size: 20rem;
  color: transparent;
}
.about {
  height: 80vh;
}

Make sure to replace “IMAGE_URL” with the URL of the background image you want to use.

That’s all! hopefully, you have successfully created Image Inside Text CSS. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.