Another effect that can be given to the text to make it look more decorative and prominent is the background Text-Transition property which has been explained in this tutorial.

Final output:
Please note: This text clipped background tranistion style works perfectly fine only in Google Chrome.

Style assigned to the above text is as follows:

In the above style, the png image file (The image can be in any other format as well), which we want to show as the background image of our text is saved in the same folder along with the CSS file and the HTML file.

• The'-webkit-text-fill-color', helps specify the text-color for the text as transparent.
• The '-webkit-background-clip' property used in code, causes the background image to clip to foreground text. The shape of the foreground content (transparent content in this case) is applied as a mask to clip background drawing.
• The '-webkit-animation-name' helps us state the the type of animation (masked animation in this case).
• '-webkit-animation-duration' sets the duration for the transition to 40sec.
• '-webkit-animation-iteration-count' makes it execute an infinite times and lastly, '-webkit-animation-timing-function' allows the transition to change speed over its duration linearly .

The @-webkit-keyframes 'masked-animation' in the above code has been used to provide animation. The next two lines indicate the position of the background in the beginning and towards the end of the animation.

Tags: CSS3 background clip, CSS3 clip background transition, CSS3 clipped background movement