Add a Image to the Header
Asked by 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?


Answers:
author: Sireesha Dugginapeddi [Appfire]
body: Hi [@serc](/t5/user/viewprofilepage/user-id/2379213),

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](https://confluence.atlassian.com/doc/advanced-pdf-export-customizations-198806890.html?&_ga=2.36556457.848944449.1548054668-748161253.1533556773#AdvancedPDFExportCustomizations-AddingImagestoHeadersandFooters). You should be able to view the output as expected in your PDF export.

Hope this helps!

Thanks

Sireesha

comments: author: serc
body: 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?


author: Sireesha Dugginapeddi [Appfire]
body: Hi [@serc](/t5/user/viewprofilepage/user-id/2379213),

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!


author: serc
body: 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) 
>  }
> ```


author: Remus Neagu
body: 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*


author: Zoriana Bogutska_Adaptavist_
body: Hi there,

For less technical Confluence users, there is ready to use macro from [Content Formatting Macros for Confluence.](https://marketplace.atlassian.com/apps/247?tab=overview&hosting=cloud&utm_source=Atlassian-Community&utm_medium=referral&utm_campaign=Comment_Add-a-Image-to-the-Header_20221212)

Background macro allows uploading pictures and editing text for headers.

![Screenshot 2022-12-12 at 14.51.47.png](https://community.atlassian.com/t5/image/serverpage/image-id/230130i6F631987DFC496C1/image-size/large?v=v2&px=999 "Screenshot 2022-12-12 at 14.51.47.png")

This app is developed by my Adaptavist team and has a list of other macros that could improve Confluence content (Tabs, Numbered Heading, LaTeX, Tooltip, Cards, Button, etc.)


Tags: questions-for-confluence