Search code examples
htmlcssgoogle-chromeprintingchromium

CSS to create full-page no-margin solid color background in print

I am trying to set a solid background color for the entire printed page when printing from Chrome. The content to be on the page is a dynamic list of unknown length that might span multiple pages.

In order to remove the white margins, I set the margins to 0 mm using the @page rule.

There are two issues that I have not found a solution to.

  1. Unable to set top margin for content on subsequent pages
  2. Unable to fill the last page to the bottom with solid color

What I got:

<html>    
<head>
    <style>
    @page {  
        margin: 0mm; }
    html {    
        -webkit-print-color-adjust: exact;    
        background-color: coral;     
        font-size: 150%; }
    h1 {
        padding-top: 50mm;}
    </style>
    </head>
    <body>
    <h1>Items</h1>
    <ul>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
        <li>Lorem</li><li>Ipsum dolor</li><li>Sit amet</li>
    </ul>
    </body>
    </html>

Print rendering in Chrome (from saved pdf): enter image description here

Solution

  • I am currently experiencing the same issue as you. I have found a solution for the 2nd part as you can read here:

    Have margins for content but not background on every page when converting/printing HTML to PDF

    and here:

    https://stackoverflow.com/a/70079034/1222240

    you have to create a div with position: fixed and then width and height as 100%, set z-index to 0 and then you can change the background color, it will be printed on every page

    The container div will need to have position: relative and z-index: 1

    For the first issue I solved in puppeteer (which I'm using to create a pdf version of the page by having it "printed" by google under the hood) by using the header and footer attributes of the library Have margins for content but not background on every page when converting/printing HTML to PDF