Example to Create Text Portrait
Example: In this example, we are using the above-explained approach.
<!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.w3wiki.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 = "w3wiki ";
document.getElementById("text").innerHTML = str.repeat(500);
</script>
</body>
</html>
Output:
Text portrait using CSS
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.