Issue Summary

Background images added via CSS to PDF customisation is not included when exporting pages with "light". In these scenarios, the export doesn't allow enough time for BG image to load.

Steps to Reproduce

1. Create a new page using the cloud editor
2. Add only one paragraph of text to the image
   • Example: "This page was created to test the PDF export functionality."
3. Add the following CSS to the space's PDF customisation:

   • @media print {
         body {
            /* Set your customized background here */
              background-image: url('https://atlassian.design/21f597d1f31e99180e9ccf2e82b47ac0/logo-centered.png') !important;
         }
         /* Page-level overrides */
         #full-height-container,
         #content-body,
         #pdf-export-container * {
            background: transparent !important;
         }
     }
     

4. Export the page created in step 1 to PDF.

Expected Results

Background image is added to the exported PDF accordingly

Actual Results

Background image is not added to the exported PDF. When testing on more complex pages (e.g. pages with more content/macros), the background image is included as expected.

Workaround

1. Adding more complex elements to the page in order to increase PDF export time, if applicable.
2. Instead of using the actual file URL (e.g. attachment download URL), use data-url to represent the image. This is commonly done to embed images directly into stylesheets, avoiding separate HTTP requests.:
   1. First, download the image to your computer.
   2. You can use online tools like https://www.base64-image.de/, if the image is public, or command-line tools to convert the address to base64-encoded.
   3. Upload your image.
   4. Copy the generated data URL and paste it in the CSS customisation. (e.g "data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...")