Show Image Under Text with jQuery and CSS3 - TextHoler.js

File Size: 396 KB
Views Total: 1558
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Show Image Under Text with jQuery and CSS3 - TextHoler.js

TextHoler.js is a jQuery plugin which uses CSS3 background-clip property to use an image as the background of your text. Works in Chrome & Safari, not Firefox. To solve that you could use an SVG insted of pure text.

See also:

How to use it:

1. Include jQuery JavaScript library and the jQuery textholer.js on your web page.

<script src="//"></script>
<script src="js/textHoler.js"></script>

2. Wrap your text into an inline block element.

<span id="demo">TEXT HOLER</span>

3. Call the plugin and specify the image source for the text background.

  background: "1.jpg"

4. Available options.


  // background color
  color: "transparent",

  // font size
  size: "48px",

  // font family
  family: "arial",

  // background-repeat
  repeat: "repeat",

  // font weight
  weight: 700

This awesome jQuery plugin is developed by diegodalbosco. For more Advanced Usages, please check the demo page or visit the official website.