CSS Text Formatting

Text portrait using CSS

Last Updated : 12 Mar, 2024

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

CSS Text Formatting

user282

Improve

Article Tags :

Similar Reads

Flip the text using CSS

The Flipping effect creates a mirror image of the text. You can flip your text both horizontally and vertically. CSS3 allows adding various effects, including text flipping due to its transformation functions. You can flip a text without any JavaScript code. Given below is the example of flipping th

Shrink Text on Hover using HTML and CSS

Text can be Shrinked or condensed using some HTML and CSS properties, you can use this animation in your websites as headings or sub-headings, the below sections will guide you on how to create the desired effect.HTML Code: In this section we have simple divÂ element which contains the text separate

How to bold the text using CSS ?

In HTML, we use the <b> and <strong> tags to make content bold. However, when it comes to styling text, CSS provides a more versatile way to achieve boldness through the font-weight property. This property allows you to set various boldness levels for your text to mark something importan

How to display text Right-to-Left Using CSS ?

In this article, we will learn how to display text Right-to-Left using CSS. This is done with the help of the CSS Direction property. By default, the text alignment is set to left to right direction in HTML Document. To display the text from right to left, we simply set the direction property to the

CSS Text Formatting

CSS Text Formatting allows you to control the visual presentation of text on a webpage. From changing fonts to adjusting spacing and alignment, CSS provides powerful properties to enhance the readability and aesthetic of text.CSS lets you adjust font properties, text alignment, spacing, and decorati

How to indent text in HTML by using CSS ?

Text indentation in an HTML document sets the length of empty white space before lines of text in a block, typically marking the beginning of a paragraph. Proper indentation can enhance the readability and layout of your web content. Here, we will explore several common approaches for text indentati

CSS text-underline-position Property

The text-underline-position CSS property specifies the position of an underline on text. It allows control over whether the underline is placed below, above, or at a custom offset from the text. This property enhances text readability and aesthetics, especially in complex layouts. Syntax: The follow

Double Layered Text Effect using CSS

The double-layered text effect feature is very new in the world of text-animation targeting animated websites and its users as the audience. The feature basically has two layers for every word and the upper layer can be manipulated by various events such as hover events. The rotation of the upper la

Neon Text Display Using HTML & CSS

In this article, you will learn to create a neon text display using HTML & CSS. The neon text display is the simplest yet one of the most striking effects used to give cool design to your texts on your web pages. In the neon display, the color of the text glows continuously which you can control

CSS text-shadow Property

The CSS text-shadow property adds shadows to text for depth and emphasis. It accepts values for horizontal and vertical shadow positions, blur radius, and shadow color. The default is no shadow is none. Syntax text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit; Property valu