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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.