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?
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!
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?
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!
This works perfectly! Thanks Sarah
It looks like you're new here. Sign in or register to get started.
