Miheretab Alemu Miheretab Alemu - 4 years ago 72
CSS Question

How to make background of the print page different from other print pages?

Is there any solution to make first page background different from other page background for print pages?

And also to make margins different for each pages?

I have tried different solutions but it didn't work; here is the solution I tried:

@page {
margin: 0px;
}
@page :first {
background: none;
margin-bottom: 60px;
}
@media print {
body {
background: url('../img/background.jpg') repeat-y !important;
}
}

Answer Source

I don't think you can accomplish this by using :second, as it doesn't seem to be a valid value.

See the Index of standard pseudo-classes.

And even if you would use just :first, I don't think the background image can be applied as stated in the above link.

Since you already tried different solutions but it didn't work, here's a solution for you.

Depending on your sites layout and requirements, you can estimate where you want to break the page, and surround that in its own container so you have full control on them when being printed.

See example code:

window.print();
body{
   background-color: black;
   margin: 0px;
}
.page-break{
   height: 1054px;
   width: 100%;
   margin: 0px;
   position: relative;
}
#first{background-color: green;}
#second{background-color: pink;}
h1{
  padding-top: 5px;
   text-align: center;
   color: white;
   margin: 0px; //Add margin 0px for the first div in page-break
}
h2{
  text-align: center;
  color: lightblue;
}

@page {
    margin: 0;
}

@media print {
    html, body {
        //style body here
    }
.page-break{
       page-break-before: always;
   }    
    #first{
	   background-color: maroon;  
      -webkit-print-color-adjust: exact; 
   }
   #second{
	   background-color: gray;
      -webkit-print-color-adjust: exact;
   }
  #third{
       //style the third page;
  }
}
<div class="page-break" id="first">
   <h1>First Page header</h1>
   <h2>Some text here </h2> 
</div>

<div class="page-break" id="second">
   <h1>Second page header</h1>
   <h2>Some text here </h2>
</div>

<div class="page-break" id="third">
   <h1>Third page header</h1>
   <h2>Some text here </h2>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download