Text portrait using CSS - GeeksforGeeks

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.
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.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.
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.
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:
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:
Final output
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?