Header Images change when using a smaller screen.

[Bas Zwaan]

Unfortunately, if you have a header with text. The text moves away when you work on a smaller screen (e.g. the size doesn't adjust normally to screen size). 

 Leading to this for example (supposed to say Research & Development):

Original (bigger screen):

Is there a way to solve this?

[Brant Schroeder · Accepted solution]

@Bas Zwaan It the text part of the image?  I want to try and recreate?

[Bas Zwaan]

Yes it is! Thanks for checking it out.

[Brant Schroeder]

@Bas Zwaan 

After playing around with the header image it looks like Atlassian is using a center image at 50% on the image to size it.  I would suggest just moving the text on the image to the center of the image both vertical and horizontal.  This should allow the text to be seen at all screen sizes.

[Bas Zwaan]

@brant Thanks for the suggestion!

I found another workaround. If I just include the header in the text below the title instead of using the header image option. It gets displayed the exact same way and the banner now adjusts with the screen size.

The image header option now seems a bit of a redundant feature.

Edit mode:

Result: