Full length image banners in Company Hub?

Question

Hello,

I saw this example of a Company Hub home page.

I love how the banner takes up the entire width of the page and connects to the above links menu.

I can't figure out how to make my image run from edge to edge and take the entire width of the page.

Advice?

Joshua Brock _ Seibert Group_ GmbH · Answer

Hi @Tess Baird,

Sami's explanation above is spot on. Company Hub's header is the only element that truly runs edge-to-edge, while content in the body still sits within the page margins. So if you're looking for a taller, full-bleed hero like the example you mentioned, that's not something Company Hub currently supports natively.

If you're open to a Marketplace app, Karma Page Builder for Confluence could be another approach. Karma lets you build custom Confluence pages visually and includes a full-width Hero section, so you can create the kind of landing-page layout you're describing without custom CSS.

One important distinction: Karma builds a regular Confluence page rather than extending the native Company Hub header itself. So this wouldn't change what Company Hub can do. It would give you an alternative way to create the full-width landing-page experience you're after.

https://marketplace.atlassian.com/apps/1228839/karma-page-builder-for-confluence-content-formatting?utm_source=atlassian-community&utm_medium=organic&utm_campaign=aura-apps-community&utm_content=community-reply

Just in full disclosure, I work at Seibert Group, the team behind Aura Apps.

Hope this helps and best of luck!

Joshua
Content Writer & US Representative
Aura Apps and Agile Hive (products of Seibert Group GmbH)

Sami Shaik · Answer

@Tess Baird , I think the picture you saw is not an image inside the page at all, which is why every placement you tried leaves gutters. Company Hub has two different places an image can live, and only one of them runs edge to edge:

* The Hub header. In the Company Hub editor, the area at the very top (behind the Hub name, directly under the links menu) is a header you can set to a colour or an image. That header is drawn at the full width of the page, which is why it "connects" to the links menu in the example with no white gap. Atlassian's guidance for it is an image around a 910:141 aspect ratio, 1,100 pixels wide or more (so roughly 1,800 by 280 for a sharp result), because it is cropped to a wide strip rather than scaled (Company Hub header image sizing).
* An image in a section. Anything placed in the body, including a one-column layout or a section set to full width, renders inside the content column. A section's width control widens the content and lets you colour the background edge to edge (use sections in Company Hub), but an image element inside it still sits within the column, with the margins you are seeing. @Tomislav Tobijas test result is consistent with that: body images do not go full bleed.

So: put the banner in the header, cropped to the wide strip, and use a section with a matching background colour immediately below it if you want the banner's colour to continue behind your first row of cards. If you specifically need a tall full-bleed hero (more than the header strip allows), that is not available in Company Hub today, and the honest route is a feature request rather than a workaround.

If you tell me which of the two you were using, I can be more specific about the crop.

Tomislav Tobijas · Answer

Fair question @Tess Baird 👀

I did try a few quick tests and I got the same results as you. I'd say the screenshot you're looking at here is a marketing one 😅

You could play around with different elements (as you've noticed), but I don't think you'll be able to get the same result as in the support article.

I'd maybe suggest trying to reach out to Atlassian Support to see if they have any known workarounds or suggestions for this 🤔

If you do figure it out, I'd appreciate if you could share the findings here.

Cheers,

Tobi