Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
4,364,818
Community Members
 
Community Events
168
Community Groups

What dimensions are best for an image header on a space homepage?

looking to add an image header and need to know what dimensions it should be.

3 answers

After a bit of trial and error, I've found that for our Confluence Cloud instance, a header image of 950 × 175 pixels fits perfectly on a Confluence Space homepage, when it is in the narrow option, not fullwidth.

 

confluence-help-image.png

Hi 

I didnt use any code, but found out for a 1920*1080 resolution of monitor if we keep the width of image 1799px, and any height, the original size fits well in a single column section.

atllassian com.pngI am still exploring 2 column and 3 column sections.

Thankyou

0 votes
Diego Atlassian Team Jan 29, 2020

Hello there!

After some fiddling with an image header locally. What I found out is that we reach the maximum width of our header as soon as we reach a height of 250 pixels.

I took a screenshot of the maximum width that a header image can reach. For this screenshot, I used a width of 700 pixels. Here, take a look:

ConfluenceHeader700px.jpg

 

However, we can reach the same width by setting the height as 250 pixels. Here:

WindowsHeader250px.png

 

To finally answer your question, we can set the image width as 100% and the image height with a minimum of 250 pixels so you can reach the maximum width available for a header image.

 

Here is an example of what I used on my instance:

!https://i.postimg.cc/LXNzLv55/windows1095-Version2.jpg|width="100%", height="210"!

 

Keep in mind that I tested this with three screens:

  • 27 inches 1080p
  • 23 inches 1080p
  • 14 inches 1080p

 

Results may vary aesthetically depending on screen resolution and size.

Let us hear from you, @Devin Parker ! Looking forward to your reply.

Could you please show the code used to create the image header with the height of 250 pixels?

Like Chris Buzon likes this

Suggest an answer

Log in or Sign up to answer
TAGS

Atlassian Community Events