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?

Answer 1

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

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

And then the CSS:

#container {
   position: relative;
}

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

Here's an example of it.

Answer 2

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; ).

Answer 3

It may be possible (but very hackish) with only CSS using the :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'll probably need to tweak it a little. Also note it won't work in IE6 because it doesn't support :after.