How do you add an background image to a confluence page

[Sarah Inchley]

I have been trying to add an image as a background to a Confluence page using HTML but am struggling to get it to work.

I can change the colour of the area behind the Confluence page but not the Confluence page itself.

Can anyone advise?

[Sarah]

Hi Sarah, 

You can achieve this by creating a user macro. However, you'll need admin access to do this.

Here's some sample code that should help:

## @param image:title=Background Image URL|type=string|required=true|desc=A link to the image to display in the background.
<div style="background-image: url($paramimage)">$body</div>

When creating the macro, you'll need to set the 'Macro body processing' mode to 'Rendered':

This macro will accept any content in it and display with a background image of your choice behind it.

You can find some additional documentation for writing a user macro here:

https://confluence.atlassian.com/doc/user-macro-template-syntax-223906130.html

Let me know if you've got any further questions!

[Lavesh Budhrani]

This is great and extremely helpful. I've been looking for this solution for a long time and finally, this works. The only adjustment I would like to make is to not have the BG image repeat when the page is zoomed out. Is this possible?  

[Sarah]

Hi Lavesh, 

Yes, this should be relatively straightforward to do. 

Simply add an additional CSS property to the macro definition:

## @param image:title=Background Image URL|type=string|required=true|desc=A link to the image to display in the background.
<div style="background-image: url($paramimage);background-size: cover;">$body</div>

You can alternatively use a `background-repeat: no-repeat;` property.

Hope this works for you!

[Lavesh Budhrani]

This works perfectly! Thanks Sarah