0

I have an HTML page with a small fixed (i.e. non-scrolling) full-bleed (i.e. zero-margin) background around the edge. I'm trying to set up the @media print stylesheet so that it prints well, and I'd like to keep the full-bleed background in the printed (PDF) version as well.

If I set @page { margin: 0; } then the background extends to the edge of the PDF exactly how I want, but page-broken text goes all the way to the top and bottom of the page without any margin. If I set @page { margin: 2cm; } then I get reasonable margins on top and bottom of every page, but the PDF has an ugly blank white border that ruins the full-bleed background effect. I've tried adding a @page { background-image: url(...); } but this doesn't seem to work at all in Chrome.

Is there some way to get the best of both worlds? To keep both the full-bleed background image but also have reasonable top/bottom-margins on the page breaks?

I found a somewhat-related question about wkhtmltopdf but it was never answered.

Steve
  • 1,541
  • 11
  • 17
  • 1
    My guess is that it's no possible to control where page breaks go when printing. Text might be zoomed in, they might choose to print landscape, or might choose a different size of paper. Too many user-controlled variables that you can't factor for in CSS – Chris Barr Aug 21 '23 at 03:26
  • Seems like you want `@page { margin: 2cm 0; }` ? – Kosh Aug 21 '23 at 03:37
  • 1
    Note that the user can decide whether to print a background image or not. In Chrome look at the printers settings and make sure background images are allowed. – A Haworth Aug 21 '23 at 06:36
  • Please add enough code so we can see the problem. The solution may depend on exactly what your HTML structure is. See https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Aug 21 '23 at 06:38

0 Answers0