Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Celebration

Earn badges and make progress

You're on your way to the next level! Join the Kudos program to earn points and save your progress.

Deleted user Avatar
Deleted user

Level 1: Seed

25 / 150 points

Next: Root

Avatar

1 badge earned

Collect

Participate in fun challenges

Challenges come and go, but your rewards stay with you. Do more to earn more!

Challenges
Coins

Gift kudos to your peers

What goes around comes around! Share the love by gifting kudos to your peers.

Recognition
Ribbon

Rise up in the ranks

Keep earning points to reach the top of the leaderboard. It resets every quarter so you always have a chance!

Leaderboard

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

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!
Oct 31, 2023

Thanks, and full width?

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.
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 # people like this

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events