Insert logo for PDF export header

[Van Le]

Hi,

I am trying to insert a logo into the header of the exported PDF. I am following the instructions on Advanced PDF Export Customizations, but the exported PDF is not showing the logo image. This is the html code I have in the header section: 

<div style="margin-top: 2.54cm;">
<img src="download/attachments/2509963270/logo.png">
</div>

The image is uploaded in the same workspace, with the URL taken from the Attachments tab. Completed URL is (https://sentify.atlassian.net/wiki/download/attachments/2509963270/logo.png?api=v2).

Could someone please take a look into what could go wrong in my case? Many thanks in advance.

Van

[Shannon S · Accepted solution]

Hi Van Le,

Welcome to Atlassian Community! I'm happy to help you.

First, be aware that edits made in the Space Settings apply to Full Space exports only. If you want a single page export specifically, make sure you create it from Space Settings > Export Space, and choose custom export, where you can select the single page you want to export.

I can get this to work with the default 10.0mm margin size, but not once I change it to 2.54cm or 25.4mm, so I believe setting the margin larger might be what's causing the issue. Note:

Very large images can spill over into the body of a page or alter the position of text or other elements used within a header or footer. In such situations, it is recommended that you reduce the size of the image and then attach it to your Confluence page again. If you prefer to keep the image size and want to move the content lower instead, you can do so by configuring the margin-top properties in the @page CSS rule.

In this case, you can try making this modification in the PDF stylesheet section instead. I got the below page margins from Customize Exports to PDF: 

@page
{
margin-top: 2.54cm;
margin-bottom: 2.54cm;
margin-left: 1.27cm;
margin-right: 1.27cm;

@top-left
{ 
background-image: url('/download/attachments/2509963270/logo.png');
background-size: 250px 86px;
background-repeat: no-repeat;
background-position: left center;
height: 86px;
width: 250px;
}
}

I set the background-size and height/width according to my logo, but you can adjust it for yours.

Let me know if that works! I tested it with my logo, and I can confirm it works well.

Take care,

Shannon | Atlassian Cloud Support

[Fabio Racobaldo _Herzum_ · Accepted solution]

Hi @Van Le ,

welcome to the Atlassian community!

if you are on the cloud, as specified in the tag, you are checking on the wrong place. Documentaion posted in your description is for Server and Data Center instances.

Please take a look here https://support.atlassian.com/confluence-cloud/docs/customize-exports-to-pdf/ 

Hope this helps,

Fabio

[Van Le]

I have followed a few other suggestions from similar posts but couldn't get it to work. Look forward to hearing from you.

[Maria Ramon]

Hello @Shannon S !

I followed your instructions and I almost got there.

The issue I am encountering is that I cannot make the logo fit within the background size, despite adding the exact dimensions of the logo, as you recommended.

What am I doing wrong?

@page
{
@top-right
{
background-image: url("https://www.silvercloudhr.co.uk/wp-content/uploads/2022/06/harri-logo.png");
background-size: 533px 215px;
background-repeat: no-repeat;
background-position: right center;
width: 533px;
height: 215px;
}
}

Ideally I would like the logo to show smaller from the original size.

Thanks in advance!

[Amber Elinsky]

Hi all, also having a similar issue regarding adding the logo into the header. This is what I have: 

@Top-right {
background-image: url('/download/attachments/700186632/IONATE%20Logo.png?api=v2');
background-size: 2.19cm 1.5cm;
background-repeat: no-repeat;
background-position: right;
height: 1.5cm;
width: 2.19cm;
}

It was working at some point and now has stopped, and I cannot figure out why. 

Hoping someone has some insight!

[Van Le]

thank you, issue resolved