Text portraits are a fascinating way to blend typography and visual art. In this article, we will learn to create a text portrait using CSS in a few simple steps. If you want to know, then keep reading this article. We have specified all the steps you need to take. So let's start designing the text portrait.
Text portrait using CSS
Approach to Create Text Portrait using CSS
Here are the steps required to get the desired text portrait.
- Create an HTML document with a bunch of "GeeksforGeeks" text, for repeating the particular word, we use the JavaScript repeat() function as shown below the HTML code.
- To darken the background in order to make the portrait appealing, use the background property along with setting the background-image using the url() function in CSS. To avoid the repetition of the image, set the background-repeat as no-repeat by placing the image at the center. For better visualization, reduce the space between the lines.
- In order to print the background with the foreground text, we need to clip the text & add some styling properties such as background-size, font, etc.
Example to Create Text Portrait
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Portrait using CSS</title>
<style>
body {
background: rgb(236, 236, 236);
overflow: hidden;
font-family: "Segoe UI", sans-serif;
}
p {
line-height: 14px;
background: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20210628182253/gfglogo.png");
-webkit-background-clip: text;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
background-size: 80vh;
background-position: center;
}
</style>
</head>
<body>
<p id="text"></p>
<script>
let str = "GeeksForGeeks ";
document.getElementById("text").innerHTML = str.repeat(500);
</script>
</body>
</html>
Output:
Example to Create Text Portrait