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

[Christoph Schötz · Accepted solution]

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

[Christoph Schötz]

Hey Stefan, you're welcome - I guess that the page is mostly hidden by other elements (the content of the page) so splitting it up sounds like a good way to try - good luck! 

Christoph 

[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.

[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:

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.