Post
Ask Question

Tips And Tricks Of CSS 3 - Part One

Tips And Tricks Of CSS 3 - Part One 

 
Before starting the process, you should have the basic knowledge of HTML and CSS.
 
Let’s start!
 
We are solving a problem in this article and our problem is, "How to use image overlay on the text?"
 

Solution

 
Create an image overlay on text with pure using HTML5 and CSS3. 
 
1. Write HTML
 
Write the HTML element in the body section. Add a div and inside that div, have a text "Hello World". We are going to transform this text with image overlay. 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.             <meta name="viewport" content="width=`, initial-scale=1.0">  
  6.                 <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  7.                     <title>image overlay on text</title>  
  8.                 </head>  
  9.                 <body>  
  10.                     <section class="wrapper">  
  11.                         <div class="text">      
  12.       Hello World!      
  13.    </div>  
  14.                     </section>  
  15.                 </body>  
  16.             </html>      
Listing 1.
 
2. Write CSS for Text display in center align
 
To apply the image overlay on the text, we need to write the CSS which is shown in listing 2. 
  1. .wrapper {  
  2.   display: flex;  
  3.   align-items: center;  
  4.   justify-content: center;  
  5.   height: 100vh;  
  6.   font-family: sans-serif;  
  7. }   
Listing 2.
 
3. Add background image using CSS
 
To add the background image in CSS, we need to use the background property with the path. Have a look below for more details. 
  1. background: url("https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");   
Listing 3. 
 
4. Stop repeat image
 
To repeat the image, we need to add the background-repeat property as shown in listing 4. 
  1. background-repeat:no-repeat;      
Listing 4.
 
5. Background position set
 
Here, I am going to set the position to center for text.  
  1. background-position: top center;     
Listing 5.
 
6. Background size
 
We are setting the background-size to 100% so that the image can cover the entire area.
  1. background-size: 100%;      
Listing 6.
 
7. Background clip
 
The “background-clip: text” is supported in all browsers with the WebKit prefix. It allows a background image to be clipped by a text element. 
  1. -webkit-background-clip: text;    
Listing 7.
 
8. Text transparent
 
We need to make the text transparent so the image can be displayed from the text. 
  1. -webkit-text-fill-color: transparent;     
Listing 8.
 
9. Text stroke
 
The CSS properties allow you to specify the color and width of strokes for text elements. 
  1. -webkit-text-stroke: 5px rgba(255, 255, 0, 0.5);      
Listing 9.
 
10. Text size
 
Here we are setting the font size of the text. You can define it according to your needs. 
  1. font-size: 320px;      
  2. font-weight: bolder;      
Listing 10.
 
Full Code
 
In Listing 11, you can view the enitre HTML and CSS. When you render this in a browser, you will see the result as shown in Figure 1 below in the Result section.  
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.             <meta name="viewport" content="width=`, initial-scale=1.0">  
  6.                 <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  7.                     <title>image overlay on text</title>  
  8.                     <style>      
  9.    .wrapper {      
  10.       display: flex;      
  11.       align-items: center;      
  12.       justify-content: center;      
  13.       height: 100vh;      
  14.       font-family: sans-serif;      
  15.    }      
  16.    .wrapper .text {      
  17.       background: url("https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80") no-repeat top center;      
  18.       background-size: 100%;      
  19.       -webkit-text-fill-color: transparent;      
  20.       -webkit-background-clip: text;      
  21.       font-size: 320px;      
  22.       font-weight: bolder;      
  23.       -webkit-text-stroke: 5px rgba(255, 255, 0, 0.5); }      
  24. </style>  
  25.                 </head>  
  26.                 <body>  
  27.                     <section class="wrapper">  
  28.                         <div class="text">      
  29.          Hello World!      
  30.       </div>  
  31.                     </section>  
  32.                 </body>  
  33.             </html>    
Listing 11.
 
Result
 
Result