Fill the div with some text instead of using background

Question

Is there any possibility to fill the text as the background for the div in css3 or css4?

div{
  background: 'some text' repeat;
}

enter image description here

Short answer: no. BUT you could fake it like this: http://stackoverflow.com/questions/1191464/is-there-a-way-to-use-use-text-as-the-background-with-css — Jonas Grumann, Sep 08 '14 at 08:37

score 3 · Accepted Answer · answered Sep 08 '14 at 08:42

3

body {
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='20px' width='70px'><text x='0' y='10' background-color='grey' fill='grey' font-size='10'>Some text</text></svg>");
}

There is no direct property, using SVG you can achive this.

refer here for fiddle

answered Sep 08 '14 at 08:42

Raja Sekar

2,062
16
23

I don't know svg, but its great to use. thanks. – Navin Rauniyar Sep 08 '14 at 08:43
It's worth to note that it works on [IE9 and above](http://caniuse.com/#feat=svg-css). – Hashem Qolami Sep 08 '14 at 08:44
this is what you expected?? – Raja Sekar Sep 08 '14 at 08:45
yes, I'll accept your answer. – Navin Rauniyar Sep 08 '14 at 08:45
SVG has support in IE9+ :) – Raja Sekar Sep 08 '14 at 08:46

Fill the div with some text instead of using background

1 Answers1