What is the proper dimension to be used for Headers?

Richard Dare
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!
February 22, 2024

Recently our team members have noticed a discrepancy in the appearance of the headers on their confluence pages.

 

Can anyone confirm the optimal resolution or pixels that an image should be set to in order for it to look the best when in compact and full screen view on the confluence site? We are accessing from PCs.

 

I set the resolution to be 950 x 175 (pixels) as found online, but the image still looks quite dull when it is full-screen.

2 answers

0 votes
Barbara Szczesniak
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 23, 2024

@Richard Dare You might also want to take a look at this article announcing new features related to header images: https://community.atlassian.com/t5/Confluence-articles/Modernized-Content-Topper-Beautiful-amp-Dynamic-Titles/ba-p/2604971 

0 votes
Humashankar VJ
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 22, 2024

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"!

 

Consider 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.

Humashankar VJ
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
February 22, 2024

Also - @Richard Dare 

 

If you have specific design requirements or preferences, you can customize the header sizes by adjusting the CSS styles within your Confluence theme or page settings.

Anyhow it's generally recommended to the default header sizes for consistency and ease of use unless there is a specific reason to correct them

Happy to help further !!

Hope this helps

Thank you very much and have a fantastic day!
Warm regards

Suggest an answer

Log in or Sign up to answer
DEPLOYMENT TYPE
CLOUD
PRODUCT PLAN
STANDARD
PERMISSIONS LEVEL
Product Admin
TAGS
AUG Leaders

Atlassian Community Events