Background image using as a Text color with background clip

Bring your own styles and apply own background images, videos and gif to text !!!

Background-clip: Text is used to apply a background, to the text and defined how far the background (color or image) should extend within an element.

HTML5 & CSS3 has introduced number of possibilities for UX designers and UX developers.

Awesome Transition effects, Two lines of code give you Triliance of happiness when executed.

9 Hours of difficulties overlaps with the happiness in last 9 seconds. Its only happen in Web Design & Development.

You have to apply background-clip property to the page background which you want to clip

Step by Step process. How to add background clip text css effect animation to my web page.

Steps:

The class attribute is used to define equal styles for elements with the same class name.So, all HTML elements with the same class attribute will have the same format and style.

The classes are defined with in <div> tag

We used a class called bg_image in that class we defined some properties like background-size:cover; background-clip:text; and background image by using those properties we will get background to the text.

We defined another class called fg_text that class fg_text is used to defined the font-size, font-weight, text-align, and color of the text(This is some text). The class fg_text is defined inside the class bg_image.

CSS

.bg_image {
  background: url('https://www.clovetech.com/uploads/slider/careers.png');
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  text-align:center;
}

.fg_text { 
  font-size:6em;
  font-weight: bold;
  text-align: center;
   color: transparent;
}

HTML

<div class="bg_image">
  <div class="fg_text">This is some text</div>
</div>
By Using Background image,
<img>
By Using Background Video
<video>
By Using Background Gif
<gif>

How does it works?

It’s very simple to integrate & easy to use, Follow the below steps order

Step1

Copy the below style properties and paste any where in the page

.bg_image {
  background: url('https://www.clovetech.com/uploads/slider/careers.png');
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  text-align:center;
}

.fg_text { 
  font-size:12em;
  font-weight: bold;
  text-align: center;
   color: transparent;
}

Step2

Copy and paste div structure under body tag.

<div class="bg_image">
 <div class="fg_text">This is some text</div>
</div>

Comments on “Background image using as a Text color with background clip

Leave a Reply

Your email address will not be published. Required fields are marked *