Is there any way to use use text as background with CSS?

Question

I would like to use dynamic text as the background of some elements in my tag. Because of this, I can use images (dynamic text). How to do it using only CSS or JavaScript?

Answer 1

You can have an absolutely positioned element inside your relative positioned element:

<div id="container"> <div id="background"> Text to have as background </div> Normal contents </div> 

And then CSS:

 #container { position: relative; } #background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; overflow: hidden; } 

Here is an example .

Answer 2

How about SVG text background image ?

 body { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'><text x='0' y='15' fill='red' font-size='20'>I love SVG!</text></svg>"); } 

 <p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p> <p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p> 

CSS indentation so you can better understand (this does not work, you need to use a single linear SVG):

 body { background-image:url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px'> <text x='0' y='15' fill='red' font-size='20'>I love SVG!</text> </svg>"); } 

Not sure how portable this is (works in Firefox 31 and Chrome 36), and this is technically an image ... but the source is inline and plain text, and it scales infinitely.

@senectus discovered that it works better on IE if you encode it with base64: https://stackoverflow.com/a/166778/

Answer 3

It can be possible (but very hacky) only with CSS, using: before or: after pseudo-elements:

 <style type="text/css"> .bgtext { position: relative; } .bgtext:after { content: "Background text"; position: absolute; top: 0; left: 0; z-index: -1; } </style> <div class="bgtext"> Foreground text </div> 

This seems to work, but you may have to adjust it a bit. Also note that it will not work in IE6 because it does not support :after .

Answer 4

Ciro's decision regarding the SVG Data URI background containing text is very smart.

However, it will not work in IE if you simply add a simple SVG source to the data URI.

To get around this and make it work in IE9 and above, encode base64 SVG. This is a great tool.

So this is:

 background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text x="5%" y="5%" font-size="30" fill="red">I love SVG!</text></svg>'); 

Becomes as follows:

 background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4='); 

Tested and works in IE9-10-11, WebKit (Chrome 37, Opera 23) and Gecko (Firefox 31).

http://jsfiddle.net/qapp5dLn/

Answer 5

You can force the element containing the bg text to have a lower stacking order (z-index, position) and possibly even set the opacity. Thus, for the element that you need above, you need a higher stacking order (z-index: 5; position: relative; for ex), and the element behind should be something lower (by default or only a smaller z-index such as 3 and position: relative;).

Answer 6

@Ciro

You can break the embedded svg code with the backslash "\"

Tested with the code below in Chrome 54 and Firefox 50

 body { background: transparent; background-attachment:fixed; background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \ <rect x='0' y='0' width='170' height='50' style='stroke:white; fill:gray; stroke-opacity: 0.3; stroke-width: 3px; fill-opacity: 0.7; stroke-dasharray: 10 5; stroke-linecap=round; '/> \ <text x='85' y='30' style='fill:lightBlue; text-anchor: middle' font-size='16' transform='rotate(10,85,25)'>I love SVG!</text></svg>"); } 

I even tested it,

 background-image: url("\ data:image/svg+xml;utf8, \ <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='170px' height='50px'> \ <rect x='0' y='0' width='170' height='50'\ style='stroke:white; stroke-width: 3px; stroke-opacity: 0.3; \ stroke-dasharray: 10 5; stroke-linecap=round; \ fill:gray; fill-opacity: 0.7; '/> \ <text x='85' y='30' \ style='fill:lightBlue; text-anchor: middle' font-size='16' \ transform='rotate(10,85,25)'> \ I love SVG! \ </text> \ </svg>\ "); 

and it works (at least in Chrome 54 and Firefox 50 ==> in NWjs and Electron guarenteed)