How to set image as background of a text?

Introduction

In the following method we will use HTML and CSS to set image as the background of the text. The property used in CSS are intermediate level.

HTML Code

The code had been used to create the basic structure of the desi…



Introduction

In the following method we will use HTML and CSS to set image as the background of the text. The property used in CSS are intermediate level.



HTML Code

The code had been used to create the basic structure of the design but the main magic lies in application of CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hima Khaitan</title>
  </head>
  <body>
    <div class="logo">
        <a class="logoLink" href="https://www.linkedin.com/in/himanshu-khaitan" >
          <span class="logoSpan">Hima</span>
          <span class="logoSpan">Khaitan</span>
        </a>
      </div>
  </body>
</html>



Adding the Font

The font has been taken from Google Fonts. Font used is Abril Fatface

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
      href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap"
      rel="stylesheet"
    />



CSS Code

CSS code is used to provide code the desired effect.

Below CSS code been written to initialize the Project. To include them in recommended but not necessary.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.logo {
  text-align: center;
}
.logoSpan{
  font-size: 5rem;
  font-family: "Abril Fatface", cursive;
  line-height: 1;
  display: block;
}



Setting image as Background

.logoSpan {
    background-image: url("https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
}

image

Image used is taken from Pexels.com



Setting Text-Color To Transparent

.logoSpan {
    color: transparent;
}

image

As we can see the text is completely invisible and only the background image is visible. Let’s fix that.



Cropping Background to Text

The following is done with background-clip property. We will use -webkit-background-clip property to prefix the code (basically to maintain browser compatibility).

.logoSpan {
  -webkit-background-clip: text;
  background-clip: text;
}

image



Final Touchup

We need to adjust background to a specific position to get best results out of it. These property made differ from Image to Image. Below given are the values which suits my example the best.

.logoSpan {
  background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

image



Final Code

Below is the final code summing all the steps above.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap"
      rel="stylesheet"
    />
    <title>Hima Khaitan</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
      .logo {
        text-align: center;
      }
      .logoSpan {
        font-size: 5rem;
        font-family: "Abril Fatface", cursive;
        line-height: 1;
        display: block;
        color: transparent;
        background-image: url("https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
        background-clip: text;
        -webkit-background-clip: text;
        background-position: bottom;
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="logo">
      <a href="https://www.linkedin.com/in/himanshu-khaitan" class="logoLink">
        <span class="logoSpan">Hima</span>
        <span class="logoSpan">Khaitan</span>
      </a>
    </div>
  </body>
</html>

Here is how to add image to the background of a text element. The following was mainly completed using background-clip property. To know more you can reach me through the Discord Server here.



My Github Profile

I’m a computer engineering student ? from India who loves to code.






An avid and passionate coder specializing in different languages. I love to build and design websites which the end user would enjoy using while keeping the website performant and the code clean. Up for freelance web development work and collaborating on exciting Open Source & Personal projects.

⚡ Stuff I Know




















? Stuff To Explore


























Happily turning coffee into code!✅



Projects I am working on

I am currently working on a MERN stack hospital management system fully equipped to manage modern day Hospitals.

Happily Turning Coffee into Code. ??


Print Share Comment Cite Upload Translate
APA
Himanshu | Sciencx (2024-03-29T06:31:10+00:00) » How to set image as background of a text?. Retrieved from https://www.scien.cx/2021/09/07/how-to-set-image-as-background-of-a-text/.
MLA
" » How to set image as background of a text?." Himanshu | Sciencx - Tuesday September 7, 2021, https://www.scien.cx/2021/09/07/how-to-set-image-as-background-of-a-text/
HARVARD
Himanshu | Sciencx Tuesday September 7, 2021 » How to set image as background of a text?., viewed 2024-03-29T06:31:10+00:00,<https://www.scien.cx/2021/09/07/how-to-set-image-as-background-of-a-text/>
VANCOUVER
Himanshu | Sciencx - » How to set image as background of a text?. [Internet]. [Accessed 2024-03-29T06:31:10+00:00]. Available from: https://www.scien.cx/2021/09/07/how-to-set-image-as-background-of-a-text/
CHICAGO
" » How to set image as background of a text?." Himanshu | Sciencx - Accessed 2024-03-29T06:31:10+00:00. https://www.scien.cx/2021/09/07/how-to-set-image-as-background-of-a-text/
IEEE
" » How to set image as background of a text?." Himanshu | Sciencx [Online]. Available: https://www.scien.cx/2021/09/07/how-to-set-image-as-background-of-a-text/. [Accessed: 2024-03-29T06:31:10+00:00]
rf:citation
» How to set image as background of a text? | Himanshu | Sciencx | https://www.scien.cx/2021/09/07/how-to-set-image-as-background-of-a-text/ | 2024-03-29T06:31:10+00:00
https://github.com/addpipe/simple-recorderjs-demo