Text Portrait in CSS

A simple and interesting way to make a Text Portrait in CSS in a few simple steps.

Steps

  1. Make a simple HTML with some Lorem Ipsum text in large quantity to fill the page
<p id='text'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam cursus .....
</p>
  1. Add a background color black and overflow hidden
body {
  background: black;
  overflow: hidden;
}
  1. Add a background image and apply the necessary properties
background: url("Raghs.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
  1. Add a web clipping property, that will do the wonders :)
-webkit-background-clip: text;

Note: In case the property -webkit-background-clip does not work, you can try with the alternative background-clip: text;

Result

Raghs - Text Portrait Raghs-Twitter Pic - Text Portrait

Reference

Cheers,
RM…
Raghavan alias Saravanan Muthu
12 Jun 2021 | Sat | 11 50 AM IST