Watermark css works in Firefox but not in Chrome or IE

Question

I have created css which places a watermark text on the page when it is in print mode.

Following is the HTML part for the watermark text.

<p id="bg-text">Unregistered copy after date <span id="date"></span></p>

Following is the css part of the watermark text.

/* WaterMark */
#bg-text {position:absolute; display:inline; top:300px; color: lightgrey;
  font-size:100px; transform:rotate(300deg); opacity:0; width:980px;}

@media print 
{
  #bg-text {position:fixed; top:430px; display:inline; color: lightgrey;
    font-size:100px; transform:rotate(300deg); opacity:0.3; width:980px;}
}

What I need is, when the user prints the page, all pages should show the watermark text.
This solution is working fine in Firefox but in Chrome and IE the watermark text appears on the first page only. The rest of the pages don't have watermarks.

What should I do to make this work in IE and Chrome?

Answer 1

You need to make sure the transform is applied to all browsers.

 -webkit- transform:rotate(300deg);
 -ms-transform:rotate(300deg);
 -moz-transform:rotate(300deg);
 transform:rotate(300deg);

add these on both CSS styles and it should work