Image Inside Text using CSS

Image Inside Text using CSS
Code Snippet:Awesome Image Knockout Text
Author: kiwibeenz
Published: January 18, 2024
Last Updated: January 22, 2024
Downloads: 769
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X