Home/ Questions/Q 6999455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T20:32:36+00:00

I’m trying to use the mask-image property to put a texture over text… It

  • 0

I’m trying to use the mask-image property to put a texture over text… It works when I view it on other people’s sites but when I try to view it on a demo site I made it doesn’t work…
Here is my full code: (I don’t own the image being used)

<!doctype html>
<html>
<head>
<h1 style="-webkit-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
-o-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
-moz-mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
mask-image: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg);
font-size:120px;">
test
</h1>
</head>
<body>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Based on the example image I’ll go out on a limb here and assume that what you really want is this (example for webkit):

    h1 {
    font-size: 120px;
    background: url(http://www.geeks3d.com/public/jegx/200812/game-texture-02.jpg) repeat 0 0, white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

    http://jsfiddle.net/ZdvXg/

    A mask makes only sense if you’re having an transparent area within your image:

    http://jsfiddle.net/ZdvXg/1/

    • 0