PDF background image not centered or covering area its meant to cover

So due to the lack of z-index and absolute positioning that comes with mpdfs, I found that using a background image and then shifting the div I want on top of it has fixed that issue for me!

The problem that occurs now that is that, and only in google chrome, when you view the PDF, everything looks just fine.

But when you try to print, it looks like this

If you deselect “Fit to page” and use A4 paper size, the background image will then fit to the screen the way its supposed to. But the client wants the background image to appear correctly by default.

This is the tag that spawns the background image:

<section class=”pdf-banner” style=”background: url(<?php echo $topBanner ?>) no-repeat;”>

And this is the CSS that I’m using to edit the background image

.pdf-banner {
background-position: center;
overflow: hidden;
background-image-resize: 6;
}

I’ve been stuck on this issue for quite some time and I was hoping someone might have an idea of why this issue happens in chrome and how to fix it. The only work around that I’ve found is this CSS

.pdf-banner {
background-position: 20% 30%;
background-size: 5055px 3000px;
}

And while this makes the print preview look correct, when just viewing the PDF as is, it makes the image way too large and un-centered, which the client also doesn’t want.

Any help is appreciated!