0

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):

enter image description here

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;
}
sgy
  • 2,922
  • 2
  • 35
  • 42

2 Answers2

2

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/

Joke_Sense10
  • 5,341
  • 2
  • 18
  • 22
  • 1
    Forgot to mention a repeatable element, so I modified code to use `position: relative`, adjusting `width`, `height`, `top` and `left` attributes to position text. – sgy Oct 23 '13 at 03:19
0

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');
StackSlave
  • 10,613
  • 2
  • 18
  • 35