Banner logo from custom html
Asked by Steve Boydon:

Is it possible to create a full width banner image by using custom html. I have seen code that puts text above the header and provides a site wide message.

If so, how would you reference the image file.

thx

Steve


Answers:
author: Steffen Heller
body: By the way, the "official" explanation is here:

[](https://confluence.atlassian.com/display/DOC/Customising+Exports+to+PDF)<https://confluence.atlassian.com/display/DOC/Customising+Exports+to+PDF>

##### Adding an Image to the Title Page {#toc-hId-1116087292}

(...)

Follow these instructions to include an image on your title page:

1. Attach the image to a Confluence page.
2. View the list of attachments on that page, then right-click the image and copy its location.
3. Paste the link into the appropriate `src=""` attribute in your PDF Stylesheet, as shown above.
4. Edit the image URL so that it is relative, by removing the first part of the URL before `/download/...`.


author: Steffen Heller
body: @Steve:

To reference an image in confluence, do the following:

* Attach an image to any confluence page
* Copy the image URL
* Trim the URL until it looks like this (the number code and image name will be different, obviously):   
  "/download/attachments/132056490/worddavd688676b602ddf5c96bd282317d69f93.png"
* Go to Space Admin \> PDF Layout \> PDF Space Export Title Page and enter this:  
  "\<img src="/download/attachments/132056490/worddavd688676b602ddf5c96bd282317d69f93.png"\>"

To make it full width is a topic of its own.   
For full width images I would do it differently and use a background image instead. I briefly explained at [](/questions/268224/single-page-pdf-export-with-image-in-footer)<https://answers.atlassian.com/questions/268224/single-page-pdf-export-with-image-in-footer>


author: Steve Boydon
body: Thanks Robert, i will give it a go.

Steve


author: RobertH
body: Steve,

I don't see why not. I would just right click on that image and copy the image URL and set that as the src in your image tag. Then adjust the sizes until you are happy.


author: Steve Boydon
body: Thanks Robert, so is there a way to refer to an image within a confluence page. Could I create a page, attach an image and have that in the img src tag?

thx

Steve

comments: author: RobertH
body: Steve,

I don't see why not. I would just right click on that image and copy the image URL and set that as the src in your image tag. Then adjust the sizes until you are happy.


author: RobertH
body: You can do the same thing that Pietro mentioned in Confluence. It's located here:

Confluence Admin -\> Look and Feel -\> Custom HTML

Then in the 'Beginning of Body' add your custom HTML. I have something like the following which matches my JIRA instance:

```
&lt;b class="banner-status"&gt;The wiki will be inaccessible from 9:30PM until 11:00PM central on Saturday, 06/28/2014.  Please save any work inside of the system before this time.  &lt;/b&gt;&lt;style type="text/css" media="screen"&gt;.banner-status {   color: #990000;}.ghx-issue-subtask {    margin-left: 0px;}&lt;/style&gt;
```

Hope this helps!

comments: author: Steve Boydon
body: Hi Robert,

Sorry, I am not looking to add text, I just want to have a full width picture from a jpeg or gif file. I think I can use custom html but need to know how to include a picture and not text.

So using the img tag

\<img src="fullwidthlogo.gif" alt="Site Logo"\>


author: RobertH
body: Didn't realize you needed that code.

Probably do something like this:

```
&lt;img src="http://images.clipartpanda.com/banner-20clipart-banner1longclipartbnw.jpg" height="50px" width="100%" /&gt;
```

in the same spot

Obviously your sizes will differ depending on the image. You shouldn't need any of that css.


author: pschaff01
body: Hi Steve

This customisation can be applied in JIRA's Announcement Banner:

[](https://confluence.atlassian.com/display/JIRA/Configuring+an+Announcement+Banner)<https://confluence.atlassian.com/display/JIRA/Configuring+an+Announcement+Banner>

In the announcement banner you can use any HTML/Javascript code you want. If you write a message in the banner, is going to appear right below the header of your JIRA instance.

Cheers,

Pietro

comments: author: Steve Boydon
body: Sorry, Pietro, my mistake, this is with confluence.

I'm also looking to do a full width image banner. I think it can be done with custom html, but i am not sure how to include an image, usually with you reference a folder and the file or url location. I am thinking this will be different in confluence.

thx

Steve