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

Question

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

You have little control over printing background images or colours for that matter. Default setting for printers are set to "don't print background images". However, here''s a great post about an alternative way to do this: http://stackoverflow.com/questions/6670151/how-can-i-force-browsers-to-print-background-images-in-css — Wim Mertens, Jan 26 '17 at 21:23
@SergChernata yes it applies to all pages rather than the first page only and background doesn't work at all on '@page :first' — Miheretab Alemu, Jan 26 '17 at 21:25
@WimMertens I have read that but it doesn't answer my question. — Miheretab Alemu, Jan 26 '17 at 21:29
@Miheretab Alemu I know, that's why it's a comment and not an answer. I thought it would be useful to share. — Wim Mertens, Jan 26 '17 at 21:31
As Serg mentioned, :first should work. Other than that we have no way of offering a solution with the information you've provided. A link would be useful perhaps? — Wim Mertens, Jan 26 '17 at 21:40
I need some one to try this for me and help me what's wrong with the code provide a new solution? — Miheretab Alemu, Jan 27 '17 at 09:26
Not sure if you want to get your code working or you want a solution, I would place all pages on it's own container and then force a page break upon printing at a specific div, so like this you can easily style the divs — Moses Davidowitz, Jan 30 '17 at 17:18

Moses Davidowitz · Accepted Answer · 2017-02-05T15:55:05.520

5

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>

edited Feb 05 '17 at 15:55

answered Jan 30 '17 at 18:17

Moses Davidowitz

982
11
28

Thank you for your answer. Even if this is the closest answer, what I need is a background of the whole page including the margins. And the first page has a little bit of black background, I want all pages including margin covered with different background than the others. – Miheretab Alemu Jan 30 '17 at 20:51
I updated my code. You will have to play around to get it to work the way you want, but the idea is there. – Moses Davidowitz Jan 30 '17 at 22:12
Can you help me with something? the above works but when the first page has content more than one page it is printed on the second page without breaking from existing second page, it should be three pages if the pages content is grater than the first page content. how can we fix that? – Miheretab Alemu Feb 03 '17 at 20:09
Can you share a fiddle of what you have so far? Will modify accordingly. – Moses Davidowitz Feb 03 '17 at 20:12
You can use your own sample. I have used yours and just add additional content on the first page like
additional text ...
. – Miheretab Alemu Feb 03 '17 at 20:29
Oh. That's a simple fix playing around the margin accordingly. I'll update the code when I get a chance to be at computer. (Replying from phone) – Moses Davidowitz Feb 03 '17 at 20:32
ok I just need to make new page if there is extra contents that overflow from page 1 and it shouldn't be mixed with page 2. I thought page-break-before would do it but it is not working. – Miheretab Alemu Feb 03 '17 at 20:34
Updated code in answer. I hope that's what you meant. With the updated code, you can keep on adding elements withing the page-break div. – Moses Davidowitz Feb 05 '17 at 15:57
No, that was not what I am looking for, anyways I found the solution, you can change it the answer the way it was before. – Miheretab Alemu Feb 06 '17 at 15:07

score 1 · Answer 2 · answered Jan 30 '17 at 18:29

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.

A. Meshu · Answer 3 · 2017-01-30T21:20:08.400

0

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

edited Jan 30 '17 at 21:20

answered Jan 30 '17 at 19:08

A. Meshu

4,053
2
20
34

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

3 Answers3

additional text ...