The banner image on the landing page of Stream is positioned centre-top of the page. This image covers the full horizontal width. To prevent this image becoming distorted it will scale with the width of the page, at larger screen sizes the bottom of the image will be cut off. This may have an undesirable effect on text or other important elements in the image, so some care needs to be taken in designing a banner image.
A good approach for text is to create a banner with the exact aspect ratio of the header space. The dimensions for this are: 1920px x 300px. By using this size you can ensure that the image resizes just as the header does on different screen sizes. See below an example for this image size:
The second, smaller box that’s centred in the above example is a guide to ensure you create enough space to make text legible. You can see an example of this below:
The second option for banners is to work to the 1400px x 400px dimensions outlined in the platform. This works best for landscape imagery with no focal point needed, an image with lots of people interacting isn’t your best option here.
Have a look at the two examples below to see the difference in image choice:
As you can see above, due to the size of the images it doesn’t retain the context of the image due to the height restraint.
When inside a course, you have the option to add header constraints. By doing this you guarantee the image you wish to display will be shown exactly as created.
Selecting this option allows you the most control over your banner images. Below you can see an example of this option:
If you’re looking to create an image with text over it, this is the option we’d strongly recommend to you. To build a banner for this option the dimensions need to be 1170px x 230px (1400px x 275px).