Add background image with either {Background image macro or CSS stylesheet

MudCo
Contributor
December 4, 2024

Hi Team,

I'd like to set an image as the background for a page but I cannot understand how the macro 'Background Image' works. Tried with CSS styling but no luck

Note:

I am on Confluence data centre 8

The image I have is within the org's website, but it is downloadable. 

 

I tried the below with CSS Stylesheet macro is did not work. I am not experienced in this so this was a sample attempt at adding a background. 

#header .aui-header { background-image:url('https://markiIT.SAMPLE.com/resource/resource/info/ac63558fea6246888c8b45cbaf07e157'); background-repeat: no-repeat; }

1 answer

0 votes
John Funk
Community Leader
Community Leader
Community Leaders are connectors, ambassadors, and mentors. On the online community, they serve as thought leaders, product experts, and moderators.
January 5, 2025

Hi MudCo,

Try this:

To add a background image to a Confluence page, you can use a user macro. Here’s how you can create and use a user macro to achieve this:

  1. Create the User Macro:

    • Navigate to the page where you want to insert the macro.
    • Click on “Edit” to start editing the page.
    • Click on the position where you want to insert the macro.
    • Click on “Insert More Content” and then select “Other Macros.”
    • Choose “User Macros” and then “Create.”
    • Define the macro with the following parameters:
      ## @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-repeat: no-repeat; background-size: cover; height: 100vh; width: 100%; position: absolute; top: 0; left: 0; z-index: -1;">
      $body
      </div>
    • Set the “Macro body processing” mode to “Rendered.”
    • Save the macro.
  2. Use the User Macro:

    • After creating the macro, you can use it by inserting it into your page.
    • Use the macro browser to find your newly created macro and insert it.
    • Provide the URL of the background image when prompted.

Alternatively, you can use the Panel Macro to add a background image to a specific section of your page. Here’s how:

  1. Insert the Panel Macro:
    • Click on “Insert More Content” and then select “Other Macros.”
    • Choose “Panel.”
    • In the macro parameters, set the titleBGColor and bgColor to a transparent color or a color that complements your background image.
    • Add the background image URL to the macro body using HTML:
      {panel:title=My title|borderStyle=dashed|borderColor=blue|titleBGColor=transparent|titleColor=white|bgColor=transparent}
      <div style="background-image: url('your-image-url'); background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100%;">
      Your content here
      </div>
      {panel}

Remember, you may need admin access to create user macros. If you do not have admin access, you might need to contact your Confluence administrator for assistance.

 

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events