How to Add Background Image in Confluence

Most Confluence pages look identical. Same white background. Same bland layout. Same forgettable walls of text.

And yet — teams spend hours writing documentation, project plans, and wikis that nobody reads twice.

Here’s the uncomfortable truth: visual presentation directly impacts how people engage with your content. According to research by Brain Rules, visuals increase information retention by up to 65% compared to text alone. And studies show that well-designed content receives 94% more total views than plain-text content.

If you want your Confluence pages to actually get read, adding background images and visual styling is one of the fastest wins you can make.

This guide walks you through every method — native options, third-party macros, and creative workarounds — to add background images in Confluence, whether you’re on Cloud or Data Center.

Does Confluence Support Background Images Natively?

Let’s be direct: Confluence does not offer a native “background image” setting in the traditional sense.

You can’t go to Page Settings and upload a background the way you might in a design tool. But that doesn’t mean you’re stuck with a blank white page.

Confluence offers several approaches — from header banners and full-width page layouts to macro-based solutions and custom CSS — that let you achieve a visually rich background effect.

Here’s what’s available depending on your setup:

Method 1 — Use a Full-Width Image Block as a Visual Background

This is the simplest method and works on both Confluence Cloud and Data Center without any plugins.

Step-by-step:

1. Open the Confluence page you want to edit.
2. Click Edit to enter the editor.
3. Place your cursor at the very top of the page, before any content.
4. Type / to open the macro browser and select Image.
5. Upload your background image (recommended: 1920×400px for a wide banner effect).
6. Once the image is inserted, click on it to open the image toolbar.
7. Select Full Width from the display options.
8. Place your page content below or overlay it using a two-column layout.

Pro tip: Choose an image with a darker tone or overlay gradient so any text content placed over it remains readable.

This method works best for page headers and section dividers rather than a true full-page background, but it’s the fastest no-code option available.

Method 2 — Add a Cover Image Using the Page Header Feature

Confluence Cloud introduced page cover images as a cleaner way to add visual identity to a page. This is distinct from a background but creates a strong first impression.

How to add a cover image:

1. Open your page in edit mode.
2. Hover over the top of the page — you’ll see a “Add Cover” option appear above the title.
3. Click Add Cover.
4. Choose from Confluence’s built-in image library or upload your own.
5. Use the Reposition option to adjust how the image is cropped and displayed.
6. Click Save to apply.

Cover images span the full width of the page header, creating a banner-style visual that greets readers before they scroll into content.

According to Atlassian’s own UX research, pages with visual headers see significantly higher engagement than default blank-header pages — especially in team wikis and project home pages.

Method 3 — Use the HTML Macro for True Background Images (Data Center)

If you’re on Confluence Data Center and have HTML macro access enabled by your admin, you can inject custom HTML with inline CSS to add a genuine background image to a section.

Step-by-step:

1. In the editor, type / and search for HTML Macro.
2. Insert the macro and paste the following code:

<div style=”

  background-image: url(‘YOUR_IMAGE_URL_HERE’);

  background-size: cover;

  background-position: center;

  padding: 60px 40px;

  border-radius: 8px;

  color: #ffffff;

“>

  <h2 style=”font-size: 28px; margin-bottom: 12px;”>Your Section Heading</h2>

  <p style=”font-size: 16px;”>Your section content goes here.</p>

</div>

1. Replace YOUR_IMAGE_URL_HERE with a publicly accessible image URL or an image already uploaded to your Confluence instance.
2. Adjust padding, font size, and border-radius as needed.
3. Click Save on the macro and preview the result.

Important: The HTML macro is disabled on Confluence Cloud for security reasons. It must be enabled by an admin on Data Center instances. Always verify with your IT team before using this method.

Method 4 — Use Third-Party Macros for Background Styling

Several Atlassian Marketplace apps extend Confluence’s visual capabilities, including background image support. These are especially useful for teams on Cloud who don’t have HTML macro access.

Top options worth exploring:

Refined for Confluence Refined offers full-page theming and background image controls through a no-code interface. It’s one of the most widely used design plugins for Confluence Cloud, with thousands of active installs.

Confluence Macros by StiltSoft Includes a Div macro that allows CSS styling including background-image properties — effectively giving Cloud users HTML macro-like capabilities with a safer interface.

Background Panel Macro by Midori Purpose-built for adding styled background panels with image, gradient, or color fills to specific page sections.

PagePlus for Confluence Provides a drag-and-drop layout editor with native background image controls per section.

When choosing a plugin, check compatibility with your Confluence version and review recent user reviews on the Atlassian Marketplace. As of recent data, over 5,000 apps are available in the Atlassian Marketplace — so there’s no shortage of options.

Method 5 — Apply Custom CSS via Site Theming (Cloud Premium)

If you’re on Confluence Cloud Premium or Enterprise, Atlassian allows custom CSS injection at the space or site level. This lets you set background images programmatically for specific page templates or space themes.

How to access it:

1. Go to Space Settings → Look and Feel → Themes.
2. Select Custom or an existing theme.
3. Look for the Custom CSS editor (available on Premium).
4. Add your CSS targeting the page body or content wrapper:

.wiki-content {

  background-image: url(‘your-image-url.jpg’);

  background-attachment: fixed;

  background-size: cover;

}

1. Save and preview the changes across your space.

Note: Custom CSS affects all pages in the space uniformly. Use specific class selectors if you want to limit it to certain page types or templates.

This method provides the most control but requires CSS knowledge and Premium-tier access. It’s best suited for design-forward teams managing a public-facing or executive-level Confluence space.

How to Make Background Images Look Professional

Adding a background image is step one. Making it look intentional and polished is step two.

Here are the principles that separate professional-looking Confluence pages from cluttered ones:

Choose images with breathing room. Abstract textures, geometric patterns, and gradient images work far better than busy photography. Stock photo databases like Unsplash and Pexels offer free high-resolution images optimized for web backgrounds.

Mind the contrast. White text on a light background is unreadable. Always test your text visibility. For light images, use dark-colored text. For dark images, use white or light-grey text. WCAG accessibility standards recommend a minimum contrast ratio of 4.5:1 for normal text.

Compress your images before uploading. Large uncompressed images slow page load and hurt readability. Tools like TinyPNG or Squoosh can reduce file size by 60-80% without visible quality loss. According to Google, pages that take longer than 3 seconds to load lose 53% of mobile visitors.

Keep it purposeful. A background image should support your content’s purpose — not distract from it. Use backgrounds to signal page type (e.g., a warm image for team culture pages, a clean abstract for technical documentation).

Test across devices. Confluence pages are frequently accessed on tablets and mobile. Always preview your background image on smaller screens to ensure it scales correctly and doesn’t break the layout.

Common Errors and How to Fix Them

Image not displaying after upload If your image URL isn’t rendering in the HTML macro, make sure the image is publicly accessible. Internal network images behind authentication walls won’t load in browser-rendered macros.

Full-width image has unwanted whitespace This usually happens when the image container has default padding. In the HTML macro, set margin: 0; padding: 0; on the parent <div> to eliminate gaps.

Background not showing in PDF export Confluence’s PDF export strips background images and custom CSS. For printed versions, add the image as an embedded content block instead.

Third-party macro not available Your Confluence admin needs to install and approve marketplace apps. Raise a request with your admin referencing the app name and its Marketplace URL.

HTML macro disabled on Cloud This is by design on Confluence Cloud. Use a third-party macro like Confluence Macros by StiltSoft, or upgrade to Premium for custom CSS access.

Best Practices for Background Images in Team Workspaces

Visual design in shared workspaces isn’t just about aesthetics. It affects how quickly team members orient themselves, how easily they find what they need, and how seriously they take the content.

According to a Nielsen Norman Group study, users form first impressions of digital interfaces within 50 milliseconds — meaning your page’s visual quality is judged before a single word is read.

Here’s what high-performing teams do differently:

Standardize backgrounds by page type. Use one background style for project kickoffs, another for status updates, and another for reference documentation. This creates visual consistency across your workspace and helps readers orient instantly.

Use backgrounds to signal priority. A bold, high-contrast background on an executive summary or critical announcement signals importance without a single extra word.

Create templates with backgrounds pre-applied. Once you’ve configured a background image setup you like, save the page as a Confluence template. This means every new page of that type starts with the right visual identity — saving your team setup time and keeping the workspace cohesive.

Involve your brand or design team. If your organization has brand guidelines, apply them to your Confluence backgrounds. Consistent use of brand colors and imagery in internal tools reinforces company culture and makes the workspace feel owned rather than generic.