<![CDATA[White bar in header and footer]]>Hey,

I'm trying to create a pdf with a header/footer image flush with the page. I've managed to get an image rendering using a base64 image but on both the header and footer there is a small white bar that I cannot figure out how to get rid of.

0_1639047341976_upload-c9c8f331-76b7-4c31-8925-ebd82c4f82ef

Ideally the header image should be flush with the top of the page and the footer image flush with the bottom of the page.

The code is fairly basic currently:

[MiddlewareFilter(typeof(JsReportPipeline))]
public override IActionResult Index()
{
       var headerPath = _env.WebRootFileProvider.GetFileInfo("templates/header.html").PhysicalPath;

       var header = System.IO.File.ReadAllText(headerPath);

       HttpContext.JsReportFeature()
              .Recipe(Recipe.ChromePdf)
              .Configure((r) => r.Template.Chrome = new Chrome
              {
                     FooterTemplate = header,
                     HeaderTemplate = header,
                     DisplayHeaderFooter = true,
                     MarginTop = "3cm",
                     MarginLeft = "1cm",
                     MarginBottom = "3cm",
                     MarginRight = "1cm",
                 });

       QuotePdfModel model = new QuotePdfModel();

       return View("Quote", model);
}

And the header.html template (with the whole base64 image removed because it's massive):

<!doctype html>
<html lang="en">
<head style="display: none;">
</head>
<body style="margin: 0;">
    <div style="height: 100px;">
        <img style="width:100%; height:100%;"
        src="data:image/jpeg;base64,..." />
    </div>
</body>
</html>

Any suggestions to remove the white bars?

Cheers,
Mark V

]]>https://forum.jsreport.net/topic/2230/white-bar-in-header-and-footerRSS for NodeSun, 08 Mar 2026 03:45:42 GMTThu, 09 Dec 2021 11:10:35 GMT60<![CDATA[Reply to White bar in header and footer on Invalid Date]]>Hey,

I'm trying to create a pdf with a header/footer image flush with the page. I've managed to get an image rendering using a base64 image but on both the header and footer there is a small white bar that I cannot figure out how to get rid of.

0_1639047341976_upload-c9c8f331-76b7-4c31-8925-ebd82c4f82ef

Ideally the header image should be flush with the top of the page and the footer image flush with the bottom of the page.

The code is fairly basic currently:

[MiddlewareFilter(typeof(JsReportPipeline))]
public override IActionResult Index()
{
       var headerPath = _env.WebRootFileProvider.GetFileInfo("templates/header.html").PhysicalPath;

       var header = System.IO.File.ReadAllText(headerPath);

       HttpContext.JsReportFeature()
              .Recipe(Recipe.ChromePdf)
              .Configure((r) => r.Template.Chrome = new Chrome
              {
                     FooterTemplate = header,
                     HeaderTemplate = header,
                     DisplayHeaderFooter = true,
                     MarginTop = "3cm",
                     MarginLeft = "1cm",
                     MarginBottom = "3cm",
                     MarginRight = "1cm",
                 });

       QuotePdfModel model = new QuotePdfModel();

       return View("Quote", model);
}

And the header.html template (with the whole base64 image removed because it's massive):

<!doctype html>
<html lang="en">
<head style="display: none;">
</head>
<body style="margin: 0;">
    <div style="height: 100px;">
        <img style="width:100%; height:100%;"
        src="data:image/jpeg;base64,..." />
    </div>
</body>
</html>

Any suggestions to remove the white bars?

Cheers,
Mark V

]]>https://forum.jsreport.net/post/9722https://forum.jsreport.net/post/9722Invalid Date<![CDATA[Reply to White bar in header and footer on Invalid Date]]>I found the solution here
https://github.com/puppeteer/puppeteer/issues/4132

<style>#header, #footer { padding: 0 !important; }</style>
]]>https://forum.jsreport.net/post/9723https://forum.jsreport.net/post/9723Invalid Date<![CDATA[Reply to White bar in header and footer on Invalid Date]]>That's fixed it!

Thanks, Jan 😀

]]>https://forum.jsreport.net/post/9724https://forum.jsreport.net/post/9724Invalid Date