nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Can you add a background to your confluence space?

Elizabeth Saucedo

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

Accepted answers

All comments

Victor Mutambuki

Elizabeth,

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

Victor

Stan Ry

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.

Sam Albury

This does not work.

L A_y8bm25

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

Gaby_67cdzg

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?

L A_y8bm25

english?

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence