Set background image for font color?

Say I have the following code:

<span>Hello world!</span>

And the following CSS:


Is there any way I can change the red to an image? Like url(images/text-bg.png);? I want to put a texture on my text and decided that I would just make the text "color" an image, but I'm not sure if this can be done with CSS.


Yes it's possible using svg , you can embed <svg> over one <div> and background image over another <div>, later apply z-index to <div>. You can use Vector applications like illustrator to create the svg the way you want.

<title>Untitled Document</title>

<div align="center">
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="" xmlns:xlink="" x="0px" y="0px"
     width="140px" height="80px" viewBox="0 0 76.25 39.167" enable-background="new 0 0 76.25 39.167" xml:space="preserve">
<text transform="matrix(1 0 0 1 5.9336 30.417)" fill="none" stroke="red" stroke-width="0.25" stroke-miterlimit="10" font-family="'Tahoma'" font-size="36">Text</text>

This is not possible, not even with CSS3. Here's an interesting article on text effects you can use with CSS3.

Another option is to use a custom font which suites your needs.

This site has an amazing amount of free open-source fonts in every format needed to support all browsers, it even gives you a nice demo file to demonstrate how to implement it in CSS. This is compatible with CSS2.1 as well, making it IE7+ compatible.

This works perfectly fine for me

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url(your-image.jpg);

The technique of swapping out text for images is common for headers and page navigation, but there really aren't any pure CSS techniques that are cross-browser compatible (this is a nice technique, but isn't something you should rely on).

If you have a finite amount of text that you want to apply the texture to, your best bet is to just replace the text with images manually, as such:


<h1 class="title">Title</h1>


h1.title { 
  background: url(images/title.gif) 0 0 no-repeat;
  width: 80px;
  height: 23px;
  text-indent: -10000px; }

it is possible, take a look at this pen here

Use this on parent of text:

  background-image: url(url);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

Need Your Help

Error in nls singular gradient matrix at initial parameter estimates

r matrix gradient nls

I'm trying to fit a rectangular hyperbola using the nls in R.

Entity Framework CodeFirst make primary key identity

entity-framework ef-code-first ef-migrations

I first designed my database in SQL Server Management Studio.