I would like to use dynamic text as background of certain elements in my tag. Because of this, I can use images (dynamic text). How do I do it with just CSS or JavaScript?
This question is related to
html
css
background
Ciro's solution about an SVG Data URI background containing the text is very clever.
However, it won't work in IE if you just add the plain SVG source to the data URI.
In order to get around this and make it work in IE9 and up, encode the SVG to base64. This is a great tool.
So this:
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 this:
background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=');
Tested and it works in IE9-10-11, WebKit (Chrome 37, Opera 23) and Gecko (Firefox 31).
(But use this in rare occasions, because HTML method is PREFERRED WAY).
.container{_x000D_
position:relative;_x000D_
}_x000D_
.container::before{ _x000D_
content:"";_x000D_
width: 100%; height: 100%; position: absolute; background: black; opacity: 0.3; z-index: 1; top: 0; left: 0;_x000D_
background: black;_x000D_
}_x000D_
.container::after{ _x000D_
content: "Your Text"; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; overflow: hidden; font-size: 2em; color: red; text-align: center; text-shadow: 0px 0px 5px black; background: #0a0a0a8c; padding: 5px;_x000D_
animation-name: blinking;_x000D_
animation-duration: 1s;_x000D_
animation-iteration-count: infinite;_x000D_
animation-direction: alternate;_x000D_
}_x000D_
@keyframes blinking {_x000D_
0% {opacity: 0;}_x000D_
100% {opacity: 1;}_x000D_
}<div class="container">here is main content, text , <br/> images and other page details</div>@Ciro
You can break the inline svg code with back-slash "\"
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 this,
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 & Firefox 50 ==> usage in NWjs & Electron guarenteed)
SVG text background image
body {_x000D_
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>");_x000D_
}<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>_x000D_
<p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p><p>I hate SVG!</p>Here is an indented version of the CSS so you can understand better. Note that this does not work, you need to use the single liner SVG from the snippet above instead:
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 on Firefox 31 and Chrome 36), and it is technically an image... but the source is inline and plain text, and it scales infinitely.
@senectus found that it works better on IE if you base64 encode it: https://stackoverflow.com/a/25593531/895245
I hope this might help you
<!DOCTYPE html>
<html>
<head>
<style>
:root:after {
content: "Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark Watermark ";
position: fixed;
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
color: rgb(187, 182, 182);
top:0;
z-index: -1;
}
</style>
</head>
<body>
<p>hey my name is JHM</p>
</body>
</html>It may be possible (but very hackish) with only CSS using the :before or :after pseudo elements:
.bgtext {_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.bgtext:after {_x000D_
content: "Background text";_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
z-index: -1;_x000D_
}<div class="bgtext">_x000D_
Foreground text_x000D_
</div>This seems to work, but you'll probably need to tweak it a little. Also note it won't work in IE6 because it doesn't support :after.
You could make the element containing the bg text have a lower stacking order ( z-index, position ) and possibly even set opacity. So the element you need on top would need a higher stacking order ( z-index:5; position:relative; for ex ) and the element behind would need something lower ( default or just a lower z-index like 3 and position:relative; ).
Source: Stackoverflow.com