nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Single Page PDF Export with Custom Background

Stefan Remer

Hello,

I have an image I would like to use globally as background for each PDF Export of a single page.

I put the following code under the Admin Settings Page "Look and Feel > Global PDF Stylesheet" (https://website.com/admin/flyingpdf/viewpdfstyleconfig.action)

@page {
  background-image: url('/download/attachments/16351356/background.jpg');  
  background-repeat: no-repeat;  
  background-position: center;  
}

Unfortunately, when exporting, it doesn't do anything.

Btw, I know of the Support Page (https://confluence.atlassian.com/conf510/customize-exports-to-pdf-829077163.html) which mentiones the following:

PDF customization only applies to space exports (not single page exports via Tools > Export to PDF)

Does someone know how to solve this?

Thanks

My Confluence Version is 5.10

Accepted answers

Christoph Schötz

Hi Stefan,

from the documentation you should put it in the space adminstration under "Look and Feel -> PDF Stylesheet": https://confluence.atlassian.com/conf510/advanced-pdf-export-customizations-829077165.html

Have you tried putting it there?

Cheers

Christoph

All comments

Christoph Schötz

Hi Stefan,

from the documentation you should put it in the space adminstration under "Look and Feel -> PDF Stylesheet": https://confluence.atlassian.com/conf510/advanced-pdf-export-customizations-829077165.html

Have you tried putting it there?

Cheers

Christoph

Stefan Remer

Hey Christoph,

thanks for your answer.

I already tried putting it directly into a space

The image is reachable.

Could the issue be the dimensions of the image? It is 2480x3508 and should cover the whole DIN A4 background (we use it in a Word template aswell).

Best regards

Christoph Schötz

Hi Stefan, don't think so. Have you tried other CSS if it works in general? Then I could imagine that the path is wrong as for the export Confluence might work in another path then you expect - is there some broken image in the pdf?

Stefan Remer

Hey Christoph,

there is no broken image. I just tried

@page {
  background-color: #ccc;
}

to see if the PDF would have an gray background. And in fact it did. But i was thinking the whole page would have a changed color. It's only at the borders. Guess I have to fiddle with some other settings and maybe split my image into sections(header, footer)

Thanks for your help

Steffen Heller

@Stefan Remer

Go to Look and Feel > PDF Stylesheet and enter

@page {
background-image: url('/download/attachments/252249415/image1.jpg');  
margin: 50px;
}

.wiki-content  {
background-image: url('/download/attachments/252249415/image2.jpg');  
padding: 30px;
margin: 20px;
}

The result will look like this:

2017-12-19 14_36_31-Steffen.Heller-Backgroundimagetest-191217-1435-96.pdf - Adobe Acrobat Pro.png

Your example don't work because you defined a background image for @page (which is the border area around the page) but then positioned it in the center of the page (where it is covered by the .wiki-content container).

Playing around with the different elements and settings should give you the solution you are looking for.

Steffen Heller

It does work if I don't use "background-position: center"

@page {
  background-image: url('/download/attachments/16351356/background.jpg');  
  background-repeat: no-repeat;  
  background-position: top center;  
}

Don't know what exactly works and what not, but if interested I would play around with that.