Is it possible to add a background image to Section macro
Asked by 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?


Answers:
author: Diego
body: 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](https://confluence.atlassian.com/cloudm/restricted-functions-in-atlassian-cloud-apps-726106706.html)**

[**Atlassian Cloud vs. server: features and use cases**](https://confluence.atlassian.com/cloudkb/atlassian-cloud-vs-server-features-and-use-cases-691011844.html)

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](https://confluence.atlassian.com/doc/styling-confluence-with-css-166528400.html)**

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

**[W3Schools - CSS Background](https://www.w3schools.com/css/css_background.asp)**

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>");  
>       }
>
>       <br />
>
>       .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](https://htmldog.com/guides/css/intermediate/classid/)**

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](https://confluence.atlassian.com/doc/page-layouts-columns-and-sections-275188613.html)**

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.

comments: author: kyle.geldmaker
body: Thanks Diego!

Looks like I have Atlassian cloud, so I guess this is not possible for me.