Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Text portrait using CSS

  • Difficulty Level : Easy
  • Last Updated : 28 Jul, 2021

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: Here are the steps required to get the desired text portrait.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  1. Create an HTML document with a bunch of “GeeksforGeeks” text, for repeating the particular word, we use the JavaScript repeat() function as shown below HTML code.
  2. 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.
  3. 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:

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(
  
            -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:

Final output




My Personal Notes arrow_drop_up
Recommended Articles
Page :