I wish to mask some anchor text of size 4.5em with a repeating image, so that the image would only show over the region where text is present. Is there any way that I can do this with CSS? Please help with relevant code and example, if possible. Thanks. :)

I wish to mask some anchor text of size 4.5em with a repeating image, so that the image would only show over the region where text is present. Is there any way that I can do this with CSS? Please help with relevant code and example, if possible. Thanks. :)

• javascript
• html
• css
• web

Share Improve this question Follow asked Sep 6, 2011 at 7:20 ikartik90ikartik90 2,82566 gold badges2828 silver badges3838 bronze badges 2

• 2 Ask for ideas not the code. Also show us what you have done so far. – Mahesh Commented Sep 6, 2011 at 7:23
• @mahesh: I didn't mean the exact code. I meant something like an example brother. – ikartik90 Commented Sep 6, 2011 at 9:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I think you're not out of luck! The only fathomable way to do this in CSS is using the image-mask property. It's really easy, but it has pretty poor browser support at the moment. think it works well in firefox, opera and google chrome. No IE support at the moment. Here's how it's used:

p{
    -webkit-mask-image: url(/path/to/mask.png);
    -o-mask-image: url(/path/to/mask.png);
    -moz-mask-image: url(/path/to/mask.png);
    mask-image: url(/path/to/mask.png);
}

That will mask every paragraph with the image path. Fortunately, it degrades nicely in IE, so users won't even notice anything wrong it'll show up as normal text! so if you don't REALLY need IE support, do this. If you do need IE support:

Use an image. Make it in photoshop. :(

Here's a demo of how its used:

http://trentwalton./2011/05/19/mask-image-text/

They are not liking the mask-image property outside WebKit but at the moment you can simulate it via "filter" in IE and via SVG in Firefox(/Opera?/WebKit?/IE?)