-
Bug
-
Resolution: Unresolved
-
Medium
-
7
-
Severity 3 - Minor
-
6
-
Issue Summary
When a CSS customization is added to the PDF export settings to add a background color or image, the background seems to be under another layer of HTML which makes it hidden.
Using the sample code below (taken from this documentation):
@media print {
body {
background: green !important;
}
}
We are getting these results:
Steps to Reproduce
- Add a PDF customization with the code below:
@media print {
body {
background: green !important;
}
}
- Export one of the pages to PDF
Expected Results
The background is visible in the PDF document
Actual Results
The background is hidden under elements in the resulting PDF file
Workaround
Apply one of the following stylesheets to the PDF export settings (Space Settings > Look and feel > PDF Export).
For general background color overrides, apply the below. This is useful for simple pages such as those with text only, but may apply background overrides in less desirable situations such as in tables or macros.
/* Broad CSS overrides for backgrounds */ @media print { body { /* Set your customized background here */ background-color: green !important; } /* Page-level overrides */ #full-height-container, #content-body, #pdf-export-container * { background: transparent !important; } }
For more selective background color overrides, apply the below. If you want certain page elements such as the title to not have its background overridden, remove the annotated section of the stylesheet before exporting to PDF.
/* Selective CSS overrides for backgrounds */ @media print { body { /* Set your customized background here */ background-color: green !important; } /* Page-level overrides */ #full-height-container, #content-body, #pdf-export-container { background: transparent !important; } /* Page header/title overrides */ [data-testid="page-content-header"] { background: transparent !important; } /* Page content overrides */ [data-testid="content-screen-component"], [data-testid="content-container-component"], #content { background: transparent !important; } }
Finally, if you wish to set an image as the background rather than a color, please use the below to replace the section in the above stylesheets annotated with "Set your customized background here".
body {
background-image: url('https://my-site.net/my-background-image.png') !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
