Print watermark text and image on each page by css not working in Firefox

Question

I want to show the watermark with the combination of text and image on each page in Firefox browser.

i have added the watermark image and then text in one div first image and then after this text will appear.

this is running well in chrome and IE.

When i want to print in Mozilla then all watermark appear on first page instead of each page.

I know the cause as in the css postion : absolute is causing the issue but what css i have to apply if i change this then its not come as watermark.

 <div class="watermark">
 <div><img src="/images/watermark_logo.png" /></div>
 <div class="watermark_text">
 printed from test site
 by site
 </div>
 </div>
 .watermark_text
 {
 width: 100%;
 color: #d0d0d0;
 font-size: 5.5em;
 text-align: center; 
 margin: 0 auto;
 z-index: 10000;
 opacity: 0.2;
 filter: alpha(opacity=15);
 white-space: normal;
 word-wrap: break-word !important;
 overflow: visible;
 }
 .watermark
 {
 display:block;
 z-index: 99999; 
 width: 86%;
 position:absolute;
 text-align:center!important;
 }
 .watermark img
 {
 opacity: 0.2;
 filter: alpha(opacity=15);
 }

Can any one help me?

Thanks in advance...

• I don't use this profile anymo: Too lazy to code up a proper answer here, but I wonder if an alternate approach might be to have the watermark as the background-image of a div, and set the background-repeat property to the height of an a4 sheet?
• user1045389: Hi, thanks for your response but image is also not coming as watermark without postion: absolute css property and this property not showing the image properly in firefox print optin.Can you give me any working link in which watermark image work on firefox print for each page.

Answer 1

Change your position: absolute to position: fixed and it will then render on each page

• Edd: +1 although this doesn't work in all browsers see this link