Add a Image to the Header

[serc]

Hi guys, im trying to add a Image to my Header but it doesnt work. I cant see the Image.

@page
{
 @top-left
 {
 content: "Document Title Goes Here"; /* This is the content that will appear in the header */
 font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
 font-size: 8pt; 
 }
 @bottom-right
 {
 content: "Page " counter(page); /* This is the content that will appear in the footer */
 font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
 font-size: 8pt;
 }
 @top-right
 {
 <div style="margin-top:10mm">
 <img src="/download/attachments/12346/header-image.png"/>
 </div>
 }
 
 /* Any other page-specific rules */
}

how can i fix this problem?

[Sireesha Dugginapeddi [Appfire] · Accepted solution]

Hi @serc,

Instead of this:

<img src="/download/attachments/12346/header-image.png"/>

use this:

background-image: url(/download/attachments/112790361/header-image.png)} 

in your stylesheet.

I am assuming you must have already gone through this article but I suggest following the steps as is from here. You should be able to view the output as expected in your PDF export.

Hope this helps!

Thanks

Sireesha

[serc]

hey sireesha,

the Problem if i use a background image is, that it fills now the header completly. You know how i can fix this?

[Sireesha Dugginapeddi [Appfire]]

Hi @serc,

Try re-sizing the image before you attach it to a page in Confluence. Try different sizes to see which one fits/looks better in your PDF output.

Thanks!

[serc]

Okay Ty!

I have a nother question, i want to use a line break in the Header and diffrent size for the Text, like:

Document

Title

The normal HTML <br /> doesnt work

content: "Document <br />Title"; /* This is the content that will appear in the header */

This is the actuall code:

@top-left
 {
 content: "Document Title"; /* This is the content that will appear in the header */
 font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
 font-size: 8pt;
 background-image: url(/download/attachments/46079785/IAV_Logo%20test4.jpg?api=v2) 
 }

[Remus Neagu]

I have the .png and .svg uploaded on one of my pages. How can I find out the url as you described it above?

Example: /download/attachments/112790361/header-image.png