Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
A text- portrait using CSS?
Creating a text portrait using CSS is an interesting visual effect where text is clipped to form the shape of an image. This technique uses CSS background-clip property to make text appear as if it's cut from an image, creating an artistic text portrait effect.
Syntax
selector {
background: url('image-path');
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: cover;
background-position: center;
}
Key CSS Properties Used
| Property | Purpose |
|---|---|
-webkit-background-clip: text |
Clips the background to the text shape |
-webkit-text-fill-color: transparent |
Makes text transparent to show background |
background-size |
Controls the size of the background image |
background-position |
Positions the image within the text |
Example: Car Text Portrait
The following example creates a text portrait using a car image with repeated text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Portrait Example</title>
<style>
body {
margin: 0;
padding: 20px;
background: #f0f0f0;
font-family: "Segoe UI", sans-serif;
overflow-x: hidden;
}
.portrait {
background: url("https://cdn.pixabay.com/photo/2015/10/01/17/17/car-967387_960_720.png");
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 80vh;
font-size: 16px;
line-height: 16px;
font-weight: bold;
}
h1 {
text-align: center;
color: #333;
}
</style>
</head>
<body>
<h1>Text Portrait Example</h1>
<p class="portrait" id="textPortrait"></p>
<script>
let str = "YELLOW CAR ";
document.getElementById("textPortrait").innerHTML = str.repeat(500);
</script>
</body>
</html>
A car-shaped text portrait appears where the words "YELLOW CAR" are repeated to fill the outline of a car image. The text takes the exact shape of the car, creating an artistic effect.
Example: Fruit Text Portrait
Here's another example using an orange image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Orange Text Portrait</title>
<style>
body {
margin: 0;
padding: 20px;
background: #e8e8e8;
font-family: Arial, sans-serif;
}
.header {
text-align: center;
background: #ff8c00;
color: white;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.orange-portrait {
background: url("https://cdn.pixabay.com/photo/2016/02/23/17/42/orange-1218158__340.png");
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: 70vh;
font-size: 14px;
line-height: 14px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="header">
<h1>Orange Text Portrait</h1>
<h2>CSS Text Clipping Demo</h2>
</div>
<p class="orange-portrait" id="orangeText"></p>
<script>
let fruitText = "ORANGE FRUIT ";
document.getElementById("orangeText").innerHTML = fruitText.repeat(600);
</script>
</body>
</html>
An orange-shaped text portrait appears with the words "ORANGE FRUIT" repeated to form the silhouette of an orange. The text perfectly follows the circular shape of the fruit.
How It Works
The technique works by:
Step 1 Setting a background image using the background property
Step 2 Using -webkit-background-clip: text to clip the background to text shapes
Step 3 Making text transparent with -webkit-text-fill-color: transparent
Step 4 Repeating text using JavaScript's repeat() method to fill the entire image area
Browser Support
This technique requires webkit-specific properties and works best in:
- Chrome and Safari (full support)
- Firefox (with
background-clip: text) - Edge (newer versions)
Conclusion
CSS text portraits combine background clipping with repeated text to create artistic effects. The key is using -webkit-background-clip: text and transparent text fill to reveal the background image through the text shape.
738 Views
