This content originally appeared on DEV Community and was authored by Himanshu
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 used is taken from Pexels.com
Setting Text-Color To Transparent
.logoSpan {
color: transparent;
}
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;
}
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;
}
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. ??
This content originally appeared on DEV Community and was authored by Himanshu
Himanshu | Sciencx (2021-09-07T17:41:32+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/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.