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:

• Animated Text-Mask Background with jQuery and CSS3

How to use it:

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

<script src="//code.jquery.com/jquery-2.1.3.min.js"></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.

$('#demo').textHoler({
  background: "1.jpg"
});

4. Available options.

$('#demo').textHoler({

  // 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.