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

Devin Parker January 28, 2020

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

5 answers

2 votes
Gareth J M Saunders
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
May 13, 2022

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

Michael MacLean
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
October 31, 2023

Thanks, and full width?

Like Howard Nedd likes this
1 vote
Lekhoni Banerjee November 29, 2020

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

1 vote
Diego
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
January 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.

David Alonzo
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
October 29, 2020

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

Like # people like this
0 votes
Cynthya
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
August 26, 2024

After many trials and errors this finally worked for me - 1662 x 306 pixels.

0 votes
anton.thelander
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
December 5, 2023

Looks like as of 2023-12-05 the height for the header image in Atlassian Cloud is 192 pixels, at least for me. Which means with a width of 2545 pixels in Brave Browser full screen, means the aspect ratio for the image is about 13.255:1 (the standard aspect ratio for a screen is usually 16:9 or the like).

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events