CODEWITHSUNDEEP
css
John Calvin
John Calvin

Reputation: 81

Textured Text with CSS?

I'm currently developing a simple page.

Does anyone know of any way to overlay a texture image over text? It seems like it's not possible with the current spec, but please let me know if this is possible.

Thanks and take care!

Upvotes: 8

Views: 9866

Answers (3)

adriendenat
adriendenat

Reputation: 3475

Dunno why nobody ever answered this. This is possible using background-clip: https://codepen.io/Grsmto/pen/ZomWEj

Upvotes: 5

Jon Harding
Jon Harding

Reputation: 4946

You can't overlay an image over text with native CSS 2.1, That will not be implemented into CSS 3.0 either. The best practice is to use a background image and still use your text in the <h1> tag and hide it with CSS.

<style>
h1 { background:url(images/imagepath.png) no-repeat; height:50px; width:300px; text-indent:-10000px; }
</style>

<body>
   <h1>Insert Text Here</h1>
</body>

Upvotes: 4

Andrew
Andrew

Reputation: 43153

Not with pure CSS alone, and certainly not in a cross browser compatible way. Best to just make it a transparent .png image.

Upvotes: 1

Related Questions