使用CSS在多圈页面上打印动态文本水印

Question

On the University system am developing. I supposed to generate admission letters where each letter has two pages with a dynamic diagonal student name . The problem is on printing the watermark comes to only one page instead of staying on each page yet on @media screen am achieving it.

<style>
@media screen{
#adm #background{
        position:absolute;
        z-index:0;
        display:block;
        height:850px;
        width:78%;
    }
    #adm #watermark{
        color:#f0f0f0;
        font-size:80px;
        transform:rotate(310deg);
        -webkit-transform:rotate(310deg);
    }
    #adm #content{
        position:relative;
        z-index:1;
    }
}

@media print{
#adm #background{
    position:fixed !important;
        z-index:-1;
        text-align:center;
        display:block;
        height:850px;
        width:78%;
        background:gre
    }
    #adm #watermark{

        color:#f0f0f0;
        font-size:70px;
        transform:rotate(310deg);
        -webkit-transform:rotate(310deg);
    }
    #adm #content{
        position:relative;
        z-index:1;
    }
}
</style>
<div id='adm'>
     <div id='background'>
        <div id='watermark'>John Morgan</div>
     </div>
     <div id='content'>Admission content</div>
</div>

I want when loop and print the admission text watermark of the student appears diagonally in the each admission letter.

Answer 1

I think you need to set the position of your element from the top in your print media section and as many you want you can increase that. In your case, I set the .background CSS top:50%; and it shows the text in the middle of the page.

And If you set it to top:150%; it will be shown in the second-page middle.

@media print {
  .adm .background{
    position:fixed !important;
        z-index:-1;
        text-align:center;
        display:block;
        height:850px;
        width:78%;
        background:green;
    top:50%;
    }

I provide an online demo for your requirements, please check here.

https://codepen.io/nasser-ali-karimi/pen/MdgGoL