Report design support

[HufferSec]

At my company we have a lot of departments generating reports, generally from a docx template we have. One of the requirements I have is that the cover page utilized is consistent with the rest of the companies reports, I have included an abstracted version of what I am aiming for below:

Following this, each page's footer will just have a page number (no date or branding). My trouble is no matter what I have done, I end up with the branding image being placed within what feels like some sort of rendering border. Is this a thing or am I missing something? Would appreciate help from anyone! :)

[MWedl]

Depending on how you positioned the branding image via CSS, there might be a rendering border.
The page content area does not cover the whole page, there are also the page margin area or page bleed area.
See https://printcss.net/articles/page-margin-boxes#h-left-bottom-left-middle-left-top-1416 and https://css-tricks.com/almanac/properties/b/bleed/ for visual representations of the page areas.

If you need the branding image only on the first page, the easiest solution would be to use an <img> tag in HTML and use absolute positioning in CSS. You might need negative position values to move the image outside of the page content area to overlap the page margin area.

<section id="page-cover">
    ...
    <div id="page-cover-date">{{ formatDate(report.report_date, 'long') }}</div>
    <div id="page-cover-branding">
        <img src="/assets/name/branding.png" alt="">
    </div>
</section>

#page-cover-branding {
    position: absolute;
    right: -20mm;
    bottom: -30mm;
    width: 10cm;
}