Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,250,101
Community Members
 
Community Events
164
Community Groups

How do I add a page header image while exporting to pdf?

Edited

I tried the technique mentioned here: https://confluence.atlassian.com/doc/advanced-pdf-export-customizations-198806890.html

 

I added css style like below, under pdf stylesheet

  1.  @page  
  2. {  
  3.    @@top-left { 
  4.     background-image: url("https://nviera.atlassian.net/wiki/download/attachments/676528129/FINALLOGO.png?api=v2")  
  5.    }  

    It didn't work.

 

I tried adding  the following to pdf layout

  1. <div style="margin-top: 10.0mm;">  
  2.   <img src="https://nviera.atlassian.net/wiki/download/attachments/676528129/FINALLOGO.png?api=v2" />  
  3. </div>  

    This didn't work either.  I verified that I was using a proper existing image url, by following the image link, and I was able to download successfully.

 

The documentation is confusing.  Finally I failed and asking for help.

1 answer

It's been a while since I wrote our styling, but it still works so let me see if I can remember how I did it.

I added this to PDF Layout. The /download link between "quotes" has to be stored somewhere in your space. Then you take the image link from there, and edit it so it starts with /download and ends with your file type, like .png.

 <div style="margin-top: 10.0mm; text-align:left"> 
<img src="/download/attachments/1111/s.png" />
</div>
>

 In the PDF Stylesheet, I have the following code under @Bonifacp.

 @top-left 
{
content: element(header);
hr
{
display: block;
height: 1px;
border: 0;
border-top: 2px solid #a8a8a8;
margin: 1em;
padding: 0;
}
}

So the main difference between what you and I did is that I called back to the header code with "content: element(header);". Try doing that, and also cutting your link down to:

/download/attachments/676528129/FINALLOGO.png

Disclaimer: I am not fluent in CSS at all. I don't know why mine works or how to explain it in any more depth. I wrote it through researching Atlassian documentation and other online resources as well as MANY trial and error tests.

I hope this helps! Let me know if you run into another wall with the CSS styling, I spent an obnoxious amount of time on ours.

Thx buddy. I will try out the way you did and see if it works for me.  Meanwhile, i chose to use google docs to create documentation for now.

No problem, please keep me posted so I can verify that this is a helpful solution I can offer to others.

I understand the appeal of Google Docs, I grew up using it and find it very intuitive. I've never thought of using it for a wiki or documentation base.

Suggest an answer

Log in or Sign up to answer
TAGS
Community showcase
Published in Confluence Cloud

Presenter Mode for Confluence is here 🖥 👩‍💻

👋  Hello Community!  My name is Stephanie Zhang, and I’m a product manager on the Confluence cloud team. Today, I’m excited to announce the rollout of  Presenter Mode : a ...

1,491 views 14 34
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you