How can I add a large faded text background via css?
Solution 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>
Solution 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.
Solution 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>
Solution 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;
}
Comments
-
j6m8 almost 2 years
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 alsooverflow: hidden;
but... Alas. It does not hide.Thanks!
-
j6m8 about 11 yearsI'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. -
allyourcode about 11 yearsUpdated 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. -
j6m8 about 11 yearsFantastically 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.
-
Terry about 11 years@j6m8 Ah, I forgot. Just add
overflow: hidden
to the parent element. Updated the fiddle, too. -
aelveborn over 6 yearsThe 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.