Single page PDF export with image in footer
Asked by Reto Eggenberger:

Hi all

I know it has been discussed before, but I want to be sure, that I don't miss anything.

Problem:

We have a Space where we do a lot of single page PDF exports. And we really would love to have our logo in the page footer.

Sounds pretty straight forward and it's really astonishing to me, that this isn't possible. Or at least I can't find out how.

This doesn't work:

* Space export footer  
  Only works for exports through the space-tools. Well, you can choose to only export one single page. But this is not really user-friendly. Espacially if you have got the export link right in the tools dropdown.
* CSS PDF Stylesheet  
  You can place a image through the CSS stylesheet using @page@bottom-left rules. But this doesn't work for us, because our logo has the width of the whole page. And there doesn't seem to be a @page@bottom rule.

I don't have any other idea to get this working. Is there a known workaround?!?

Any help appreciated.

Thanx


Answers:
author: Steffen Heller
body: You can define the logo as background image so it will cover the whole page's width:

```
@page {  background-image: url(/path to/yourLogo.png);background-repeat: no-repeat;  background-position: left bottom;margin-bottom: 4cm; /* enough margin to not have text area and footer overlap */ }
```

comments: author: Reto Eggenberger
body: Thank you very much. I didn't think of this method!

With my first test, the image is now way to large and I have to include some whitespace underneath the logo, so it doesn't sit on the page edge. But that's fine for me.

Thanks for this good workaround.


author: Luuk Honings
body: Hi All :)

Late.... but for those still searching this topic, this worked for me using a smallish image (150x55px):

```
@pagetTeng
{
background-image: url(https://mylink-to-my-image);
background-repeat: no-repeat;
background-position: 16cm 0.5cm;
margin-top: 2cm;?

@bottom-left
{
content: "Copyright ? 2019 - Blah";
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 8pt;
}

@bottom-right
{
content: "Page " counter(page);
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
font-size: 8pt;
}
}
```


author: Robert F?rster
body: Jeff,

I had the same problem you are facing - although I added a logo as bg-image it did not show up. I found out that it worked when I added a "content" attribute containing "\\00a0" (=Whitespace) and set the width to an appropriate level.

I don't know if it's the correct way to do it but at least it works!

Altogether my page-format looks like this:

@page  
{  
@top-right  
{  
content: "\\00a0";  
width: 200px;  
margin-top: 10px;  
background-image: url(pathToMyJPG);  
background-repeat: no-repeat;  
background-position:right center;  
}  
@bottom-center  
{  
content: "Page " counter(page);  
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;  
font-size: 8pt;  
}  
/\* Any other page-specific rules \*/  
size: 210mm 297mm;  
}

Also: I've learned that the attribute "background-size" seems not to work within Confluence, so you will have to resize the image "manually" (within any picture-editing-software) before uploading it.


author: Jeff Hamilton
body: I added the code to the "Global PDF Stylesheet" but my logo still does show. I tried to increase the margin and that didn't work. Can I use outside URLs?

@page  
{

background-image: url([https://www.somedomain.com/images/logo.png](https://www.ameriquestcorp.com/images/aq-logo.png));  
background-repeat: no-repeat;   
background-position: left top;  
margin-top: 2cm; /\* enough margin to not have text area and header overlap \*/

@bottom-center  
{  
content: "? Copyright Company, Inc."; /\* This is the content that will appear in the footer \*/  
font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;  
font-size: 6pt;  
}  
/\* Any other page-specific rules \*/  
}

comments: author: Robert F?rster
body: Comment removed and added as "suggested answer"


author: Jeff Hamilton
body: I have everything working but the logo does show. I am adding a full URL. could that be the issue?

background-image: url(http://[www.somedomain.com/images/logo.png](http://www.ameriquestcorp.com/images/aq-logo.png));  
background-repeat: no-repeat;   
background-position: left top;  
margin-top: 2cm; /\* enough margin to not have text area and footer overlap \*/


author: Steffen Heller
body: Off course, you can change the position of the logo when it is on the edge of the page. Try something like

```
background-position: left 90%;
```

comments: author: Reto Eggenberger
body: Thanks again.

I definitly should get more into CSS!


Tags: confluence-administration