Is it possible to add a background image to Section macro

kyle.geldmaker

I'm trying to make site specific pages and I'd like to create a section at the top of the page that has full screen width background image about 200px tall.

 

Is this possible?

Diego_88dj6o

Hello there!

Kyle, I would like to start by saying that this is only possible, and partially for that matter, on Confluence Server. In Confluence Cloud this type of customization is not possible. You can check a little more here:

Functional differences in Atlassian Cloud

Atlassian Cloud vs. server: features and use cases

 

Now moving on. We will need to use Space Stylesheets for this. Space stylesheets allow you to customize a lot of how Confluence looks like:

Styling Confluence with CSS

After reading that, we then need to understand a little bit more about CSS and background:

W3Schools - CSS Background

 

Then, we can move on to editing the Space Stylesheet:

1. Go to the desired space
2. Click Space Tools at the bottom left corner
3. Select Look and feel
4. Select the Stylesheet tab

When we reach the Stylesheets, we will need to edit it:

1. Click Edit
2. Paste the one of the following structures of CSS
   

   1. .columnLayout.two-equal .innerCell{
      background: url("https://www.w3schools.com/css/bgdesert.jpg");
      }

      
      .columnLayout.single .innerCell{
      background: url("https://www.w3schools.com/css/paper.gif");
      }

3. Save the Stylesheet

Here is an explanation on why we use . and then the class name or # and then ID. Those are CSS Selectors. Take a look:

Class and ID Selectors

 

The .columnLayout.two-equal refers to the dual column arrangement that can be created with Sections in Confluence. The .columnLayout.single will apply the background to single column sections in Confluence. Here is more information about sections:

Page Layouts, Columns and Sections

After we save the stylesheet, we can go ahead and create a new page with a section:

1. Create a New Page
2. Add a Single or Double column
3. Add whatever content you have to add
4. Publish
5. You should see the background

Notes

• This will affect all pages within that particular Space
• Something might break if the styling is not properly adjusted to Confluence
• This requires some knowledge of CSS and how to apply styles

Again, this kind of customization is not available for Confluence Cloud.

So, let us know if this works for you Kyle!

Looking forward to your reply.