CODEWITHSUNDEEP
csshtml
Miheretab Alemu
Miheretab Alemu

Reputation: 976

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;
            }
        }

Upvotes: 4

Views: 3334

Answers (3)

Moses Davidowitz
Moses Davidowitz

Reputation: 982

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>

Upvotes: 5

A. Meshu
A. Meshu

Reputation: 4148

build a function that will add a class to the first container, and then call the window.print() function. the class will look something like that:

.div_with_bg {
height: 3508px; 
width: 2480px; 
background: url('../img/background.jpg');
background-repeat: repeat-y;}

Upvotes: 0

spencer.sm
spencer.sm

Reputation: 20526

From the docs about @page:

You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

It looks like changing the background of the first printed page only (using @page) is not possible.

Upvotes: 1

Related Questions