How can I add a large faded text background via css?

Question

I'm looking to create a Zune/Microsoft-style oversized title in CSS so that a div has a semi-transparent text behind it.

Any ideas? I'm hoping to keep it as unreliant on plugins and images as possible — but it's important that the text can overflow (invisibly), and that it can be changed (probably by JS). It must be able to overflow slightly without appearing outside the div; that is, notice the bottom of the "text" letters; this is the equivalent of setting bottom: -5px; in CSS.

This is what I'm considering:

#about_big {
    font-family: "Proxima Light", sans-serif;
    font-size: 2000%;
    color: rgba(100, 100, 100, .5);
    overflow: hidden;
    padding: 0;
    margin: 0;
    position: absolute;
}

...inside an about div that is also overflow: hidden; but... Alas. It does not hide.

Thanks!

Answer 1

I understand that an answer has been accepted for your question already, but I thought I could provide my two cents, just for the sake of completeness.

While there is no inherent problem with creating an additional <div> element to hold the text, I prefer using the ::after pseudo-element to create one. It's probably (IMHO) more semantically correct, but it really depends what purpose you want the text to serve as.

In my example, I have placed the text you want to appear in the background in a HTML data- attribute, say, data-bg-text:

<div class="bg-text" data-bg-text="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus.
</div>

And for your CSS, you simply have to create a pseudo-element, and assign content from the custom HTML data- attribute:

.bg-text {
    background-color: #aaa;
    overflow: hidden;
    padding: 20px 20px 100px 20px;
    position: relative;
    width: 400px;
}
.bg-text::after {
    color: #fff;
    content: attr(data-bg-text);
    display: block;
    font-size: 80px;
    line-height: 1;
    position: absolute;
    bottom: -15px;
    right: 10px;
}

See the fiddle here - http://jsfiddle.net/teddyrised/n58D9/ or check the proof-of-concept example below:

.bg-text {
    background-color: #aaa;
    padding: 20px 20px 100px 20px;
    position: relative;
    width: 400px;
    overflow: hidden;
}
.bg-text::after {
    color: #000;
    content: attr(data-bg-text);
    display: block;
    font-size: 80px;
    line-height: 1;
    position: absolute;
    bottom: -15px;
    right: 10px;
}

<div class="bg-text" data-bg-text="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu quam dolor, et aliquet lectus.</div>

Answer 2

Here's my solution. Preview in jsfiddle

.about_box {
  z-index: 5;
  width: 728px;
  height: 400px;
  position: relative;
  background: #0099ae;
  overflow: hidden;
}

#about_small {
  z-index: 7;
  position: relative;
  top: 0;
  left: 0;
  color: #f7f7f7;
  padding: 20px;
}

#about_big {
  z-index: 6;
  font-family: Arial;
  font-size: 120px;
  color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  padding: 0;
  margin: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

<div class="about_box">

  <div id="about_small">
    "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog", "The quick brown fox jumps over the lazy dog"
  </div>
  <div id="about_big">
    text
  </div>

</div>

You might want to experiment with line-height or make bottom negative in #about_big to get the background text right at the bottom.

Answer 3

You overlap on div with another DEMO http://jsfiddle.net/FkE2V/

#container {
    width: 100px;
    height: 100px;
    position: relative;
}
#text, #other {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#other {
    z-index: 10;
    color:#f00;
}