How to place and rotate text in background of elements with CSS3? - html

Question

I have a repeatable wrapper element with children elements: content element, with left and right elements, all divs.
I want to add some text (ie, "Retired"), rotated by few degrees, like a watermark in the background of content. This can't be a background image, because this text shall be localized (and for maintenance purpose, easier to change a text instead of an image).
Next image shows a disposition of text "Retired" (without showing left and right elements):
Here's the basic HTML layout of this element, it might be useful:
<div class="wrapper">
<div class="leftcolumn">Left column</div>
<div class="content">
<h1>Text Text Text Text Text Text</h1>
<p>Text Text Text Text Text Text Text Text Text</p>
</div>
<div class="rightcolumn">Right column</div>
</div>
And CSS:
.wrapper {
margin: 0 auto;
width: 450px;
display:block;
background-color:#222222;
border-radius: 5px;
}
.content {
float: left;
width: 318px;
padding-left: 5px;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}
.leftcolumn {
width: 50px;
float: left;
}
.rightcolumn {
width: 75px;
float: left;
}

Answer 1

Here is a working code:
Html
<div id="wrapper">
<div id="leftcolumn">Left column</div>
<div id="content">
<h1>Text Text Text Text Text Text</h1>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<div id="rightcolumn">Right column</div>
</div>
<div id="textwatermark">
<p>Retired</p>
</div>
CSS
#textwatermark {
color: #d0d0d0;
font-size: 50pt;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-45deg);
position: absolute;
width: 100%;
height: 100%;
margin: 0;
z-index: -1;
left:170px;
top:-100px;
}
Check the demo here:http://jsfiddle.net/x6FwG/

Answer 2

You could use transform:rotate(). Check this out http://www.w3schools.com/cssref/css3_pr_transform.asp . You'll have to put an Element inside an Element to get the effect you want.
Note: This won't work in older Browsers, so you may want to just use something like:
background-image:url('location.png');