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!

Translunar

jsfiddle.net/znuXs ? – Pasteurization

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>

Ricercar

Fantastically useful, thank you so much! EDIT: My only complaint is that it does not cut off the text at the bottom of the div; probably easily fixable, though I don't happen to know how in this example. – Translunar

@Translunar Ah, I forgot. Just add overflow: hidden to the parent element. Updated the fiddle, too. – Ricercar

The only problem is that the "background" text will appear on top of the actual text in case they overlap, and if you send the "background" back with z-index it will not appear at all because it will be behind the parent div's solid gray background. It could work if, along with assigning the ::after element with a negative z-index, you also made the parent div's background semi-transparent. – Demetri

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.

Yuan

Answer 3

Here's a complete soln:

<!doctype html>
<html>
<head>
<title>Text Background</title>
<style>
body {
  background-color: #eee;
}
.container {
  position: relative;
  background-color: #ccc;
  z-index: -2;
  height: 25pt;
  width: 160pt;
  overflow: hidden;
}
.background-text {
  color: white;
  font-size: 20pt;
  position: absolute;
  z-index: -1;
  bottom: -8pt;
  right: 0;
}
</style>
</head>
<body>

<div class="container">
  <div class="content">
    Lorem ipsum dolor.
  </div>
  <div class="background-text">Background</div>
</div>

</body>
</html>

Eupatorium

I'm sorry, I think I was a little unspecific when talking about overflow — this works great as long as the image is the same color as the background and it doesn't overflow, but I'm not sure that's the case. I've edited my question to reflect that the background-text may overflow, and has to stay invisible. – Translunar

Updated my soln. It was just a matter of adding overflow: hidden to .container. The other little change is that I shifted the background text down (to demonstrate what overflow looks like), and added a background color to the body so that it would be clear the overflow is working as desired. – Eupatorium

Answer 4

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;
}

Dortheydorthy