1

I'm trying to create an HTML page which includes a <div> with a background-color which shows up when printed. This works by using -webkit-print-color-adjust: exact in the CSS style for the div, but only up to a point.

If the div spans multiple pages then only the first page shows the background colour, the rest have white background. This is the case in Chrome, Safari and Edge, while Firefox doesn't even show it on the first page (just white background throughout).

Why this matters: I've got an automated process, using a headless Chrome browser + Puppeteer to convert HTML to formatted and justified text in a PDF, which is then superimposed on a different PDF template document, for production of reports. The background of the PDF template is coloured, and so when I embed the text onto it, I don't want a white rectangle appearing.

Here's a minimal test case to reproduce the problem. (The odd margins and padding are to get the text blocks the right size for superimposing on the template once converted to PDF.)

<html>
<head>
    <style>

@media print { 
  @page {size: A4 portrait; margin: 144pt 72pt 252pt;} 
  .content {
    padding-top: 186pt; 
    height: 260pt; 
    background-color: #fffaec; 
    -webkit-print-color-adjust: exact; 
  }
}
</style>
</head>
<body>
    
    <div class="content">
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p>
    <p>Here's some content.</p> 
    </div>
    
</body>
</html>

Any suggestions of tricks that would get the background colour onto pages 2+? Or is this just a case of having to live with the v poor support that there is for CSS print styles?

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
Jonathan
  • 341
  • 3
  • 14
  • Should this be tagged "Google Chrome", since you seem to be using and requiring Chrome? – Armen Michaeli Jun 24 '21 at 13:17
  • On my Chrome/Edge WIndows 10 the background color extends as you have specified - that is to 260pt - with the rest of the text printed (without background color) as you haven't specified overflow: hidden. This seems to me to be the correct action. Could you describe a bit more what is being aimed at because if you put say height auto all the text gets the background color but there must be some reason for the specified pt setting. – A Haworth Jun 24 '21 at 13:24
  • I didn't tag with Google Chrome because although that's my setup, this is common to all browsers (with the caveat that Firefox is even worse, ignoring background colour completely) – Jonathan Jun 25 '21 at 14:25
  • @AHaworth I'm trying to get coloured background wherever there is text. The reason for the div height on the page is this: I'm trying to produce text output which is positioned within a particular rectangular area on the page, so that when it's then superimposed onto the template, it appears in the right place. (The `padding-top` is because the first page is differently laid out.) All of this works fine - the text is positioned in the right location on the pages when printed to PDF - but the `background-color` only appears on the first page. – Jonathan Jun 25 '21 at 15:08
  • For me the background color also appears at the first line of text on the second page. The background color is depending on the height to know where it is to be. If you make it larger, or even auto, you should see it under all the text, as I do. As you have things set up most of the text is overflowing outside the element so there is no background color under it. – A Haworth Jun 25 '21 at 15:43
  • Ah, yes I see that with a fixed height the subsequent pages are overflow - that makes sense. Trouble is I want the height _on each page_ to be 260pt so I can't just do `height: auto`. Looks like I'm trying to push css print styles beyond what they're capable of and I should perhaps just be glad that I've got it as far as I have. Workaround is probably to change the template background and live with white. – Jonathan Jun 27 '21 at 16:02

0 Answers0