DEV Community

Cover image for How to set image as background of a text?
Himanshu
Himanshu

Posted on

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 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>
Enter fullscreen mode Exit fullscreen mode

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"
    />
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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");
}
Enter fullscreen mode Exit fullscreen mode

image

Image used is taken from Pexels.com

Setting Text-Color To Transparent

.logoSpan {
    color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo himakhaitan / Hospital-Management-System

A Hospital Management System including the website 🌐 and much more functionality such as Resource Management, Patient Tracking, etc. Thus, a complete package to 🏥 Medical Industry 🌱.



Hospital Managment System + Website

            

This is a Hospital Management System made using Django & MERN Stack.

DescriptionScreenshotInstallation and SetupLicenseContribution

Description

The project is made to serve a modern day Hospital to take it's Management online and make most of the tasks automated.

The project serves to both the internal and exterior functioning of the Hospital such as Website 🌐, Patient History 😷, Staff Management 👨‍🔬, Resourse Management and more.

The Project will also ease the Doctor-Patient Interaction. Hence serving as a complete package to the Medical Industry.

Screenshot

Installation and Setup

License

This project uses an MIT license.

Contribution

Himanshu Khaitan     Shashank Shekhar

Happily Turning Coffee Into Code 💻






Happily Turning Coffee into Code. 💻🌱

Discussion (0)