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>