How to get correct rendering size when printing html elements

Question

I have trouble understanding how to render html elements with correct size when printing them to A4 size paper.

To illustrate my purpose, I simplified my code to a html

Answer 1

Cover page should be filled with some image up the very edges of A4 paper.

You're never going to satisfy this requirement. Trust me, I've been doing dashboards and reports on the web for a long time and you simply don't get fine-grained control over rendering like this. The web isn't designed for it.

You can still generate some great reports if you're willing to work within a margin and not try for pixel-perfect layouts. Web reports can look super sharp and you can cover multiple media with one code base.

But for situations where pixel-perfect rendering matters, in addition to control over page breaks and such, only a PDF library will suffice. There are some good ones out there--I've had success with PDFSharp.

Why don't you display a cover image that doesn't span the entire page?