2

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?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Mohemmad K
  • 809
  • 7
  • 33
  • 74

1 Answers1

0

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

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
Justin Dekkers
  • 147
  • 1
  • 1
  • 10
  • 1
    I remove the whitespaces in the prefixes because it breaks the property. I upvote because this is the valid answer – Marcos Pérez Gude Sep 16 '15 at 10:27
  • 1
    I'm interested in hearing in what way this solves the problem in the question. – Mr Lister Sep 16 '15 at 17:07
  • Before implementing suggested solution, the watermark was appearing on first page only (as per I mentioned in the question). But after applying the solution it disappeared from the first page also. – Mohemmad K Sep 17 '15 at 05:58