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.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=`, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>image overlay on text</title>
- </head>
- <body>
- <section class="wrapper">
- <div class="text">
- Hello World!
- </div>
- </section>
- </body>
- </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.
- .wrapper {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100vh;
- font-family: sans-serif;
- }
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.
- 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.
- background-repeat:no-repeat;
Listing 4.
5. Background position set
Here, I am going to set the position to center for text.
- 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.
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.
- -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.
- -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.
- -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.
- font-size: 320px;
- 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.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=`, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>image overlay on text</title>
- <style>
- .wrapper {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100vh;
- font-family: sans-serif;
- }
- .wrapper .text {
- background: url("https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80") no-repeat top center;
- background-size: 100%;
- -webkit-text-fill-color: transparent;
- -webkit-background-clip: text;
- font-size: 320px;
- font-weight: bolder;
- -webkit-text-stroke: 5px rgba(255, 255, 0, 0.5); }
- </style>
- </head>
- <body>
- <section class="wrapper">
- <div class="text">
- Hello World!
- </div>
- </section>
- </body>
- </html>
Listing 11.
Result