Is there a way to use use text as the background with CSS

Question

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

User · Answer

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  lt svg xmlns  http   www w3 org 2000 svg  gt  lt text x  5   y  5   font-size  30  fill  red  gt I love SVG  lt  text gt  lt  svg gt       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    http   jsfiddle net qapp5dLn

User · Answer

You can have an absolutely positioned element inside of your relative positioned element   x000D   x000D   container      position  relative      background      position  absolute     top  0     left  0     bottom  0     right  0     z-index  -1     overflow  hidden    x000D   lt div id  container  gt       lt div id  background  gt      Text to have as background      lt  div gt      Normal contents  lt  div gt  x000D   x000D   x000D   Here s an example of it

User · Answer

Using pure CSS    But use this in rare occasions  because HTML method is PREFERRED WAY     x000D   x000D   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    x000D   lt div class  container  gt here is main content  text    lt br  gt  images and other page details lt  div gt  x000D   x000D   x000D

User · Answer

SVG text background image   x000D   x000D  body   x000D      background-image url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  version  1 1  height  50px  width  120px  gt  lt text x  0  y  15  fill  red  font-size  20  gt I love SVG  lt  text gt  lt  svg gt     x000D    x000D   lt p gt I hate SVG  lt  p gt  lt p gt I hate SVG  lt  p gt  lt p gt I hate SVG  lt  p gt  lt p gt I hate SVG  lt  p gt  x000D   lt p gt I hate SVG  lt  p gt  lt p gt I hate SVG  lt  p gt  lt p gt I hate SVG  lt  p gt  lt p gt I hate SVG  lt  p gt  x000D   x000D   x000D    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     lt svg xmlns  http   www w3 org 2000 svg  version  1 1         height  50px  width  120px  gt       lt text x  0  y  15  fill  red  font-size  20  gt I love SVG  lt  text gt     lt  svg gt         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

User · Answer

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  lt svg xmlns  http   www w3 org 2000 svg  version  1 1  width  170px  height  50px  gt         lt 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     gt         lt text x  85  y  30  style  fill lightBlue  text-anchor  middle  font-size  16  transform  rotate 10 85 25   gt I love SVG  lt  text gt  lt  svg gt         I even Tested this    background-image  url    data image svg xml utf8       lt svg xmlns  http   www w3 org 2000 svg  version  1 1  width  170px  height  50px  gt         lt 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     gt         lt text x  85  y  30          style  fill lightBlue  text-anchor  middle  font-size  16          transform  rotate 10 85 25   gt          I love SVG         lt  text gt       lt  svg gt         and it works  at least in Chrome 54  amp  Firefox 50     usage in NWjs  amp  Electron guarenteed

User · Answer

I hope this might help you   x000D   x000D   lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt     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               lt  style gt   lt  head gt   lt body gt   lt p gt hey my name is JHM lt  p gt   lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

It may be possible  but very hackish  with only CSS using the  before or  after pseudo elements    x000D   x000D   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    x000D   lt div class  bgtext  gt  x000D    Foreground text x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

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

[html] Is there a way to use use text as the background with CSS?

Examples related to html

Examples related to css

Examples related to background