Are you in the loop? Keep up with the latest by making sure you're subscribed to Community Announcements. Just click Watch and select Articles.

×
Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Celebration

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

Can you add a background to your confluence space?

I am wondering if a background image can be added to ones Confluence space?

2 answers

4 votes
Stan Ry
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Jan 11, 2019 • edited Jan 15, 2019

Hi @Elizabeth Saucedo,

Sure, you can do that by using CSS modifications.

Here's what you can do:

1. On the page where you want to change the background, add a macro that allows mofidying HTML code of a rendered page.

You can choose from:

  • HTML macro (this can be added from the control panel in Confluence; the macro can be disabled, so if you don't see it, problably your Confluence admin has disabled usage of this macro)
  • Markdown macro (this one is supposed to inject Markdown, but actually you can add anything from HTML through CSS to JavaScript. Content inside the macro will be injected on the page after you finish editing the page.

2. Attach your background image to the page.

3. In the image dialog right-click the added background image and select Copy the image URL from the context menu.

Alternatively, insert the attached image to the page, save the edits and then copy the image URL as you normally do on the web using your browser (right-click the inserted image and copy its URL location). When copied, you can delete the inserted background (but leave the attachment).

4. Insert the following code inside the added Markdown or HTML macro

<style>
#main {
   // background-color: lightblue !important;
 background-image: url("https://example.net/wiki/download/thumbnails/123456/background.jpg") !important;
 background-size: 100% 100%;

</style>

This is the identifier of the page canvase where Confluence displays the page text. It's the CSS selector for the main ID.

This line sets the backround-color if your image is transparent.

   // background-color: lightblue !important;

Following line adds the attached background:

background-image: url("https://example.net/wiki/download/thumbnails/123456/background.jpg") !important;

The !important flag at the end is the rule that overrides other background-image properties should they be applied to the page (unless they also have this rule applied to them).

Finally, this line stretches and fills the added background image across the full canvas drawn by the main element.

background-size: 100% 100%;

I believe you can also to that by JScript but I feel that using CSS will be preferrable (it's handled first, you won't need the page to draw and finish loading).

If you need to apply this image to every page in your space, you can do one of the following:

  • Add the CSS within the space settings - this will apply the CSS to every page existing in the current space.
  • Add the CSS inside the Markdown macro for a page template - this will ensure that every time your users create a new page, this CSS will be automatically added to the created page so that the page will render with a changed background. All previously added pages will remain untouched.

Thank you, do you have any recommendations for the pic size?

Gaby
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Jan 20, 2023

Nur für mich als Zusatzfrage dazu: Wird dadurch der Hintergrund (Bild etc.) für die gesamte Website aktiv? Oder z.B. in Confluence nur für die Seite und die Sidebar bleibt unberührt?

english?

Susan Retzer
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
Jun 20, 2023

I'm trying this code listed above and it isn't working. Is there documentation that shows acceptable tags to use? And how to use them? I"m familiar with HTML and that isn'tt working if I try to just use as I would in a standard webpage

0 votes
Victor Mutambuki _Mumo Systems_
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Jan 10, 2019 • edited

Elizabeth,

I believe it's not possible. Colors and themes, yes.

Victor

This does not work. 

Like FERRAMENTAS ITSM likes this

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events