An overall best practice for ensuring your Splash page's background or header image looks great on all screen sizes is to use imagery that:

(1) Doesn't have text built into the photo 

(2) Doesn't have embedded logos, buttons, or patterns

Why? Great question!

A browser has no way of detecting that the text or button built into an image is its own separate entity that needs to be re-sized or positioned differently depending on the screen size.

That's why we recommend always using dynamic elements — such as live-text headlines or logos — and placing those atop your header or background.

But I have an awesome static image that I NEED to use!

No problem! Sometimes a designer will work his or her magic in Photoshop, for example, creating you a fantastic event flyer that's just too beautiful not to use.

If that's the case, we have three suggestions:

1. You can use a Flyer theme, which is optimized for this very use-case. Head to this article on image specs and Flyer themes.

2. You can incorporate your flyer into our image-only email templates. In other words, don't use the flyer for your Splash page but leverage its beautiful design for the invitations. 

3. If you choose not to use a flyer theme and set the flyer as a block's background image, we recommend using our image positioning tools to determine how the image will be displayed (e.g. Fit Width or Fit Height) on desktop, tablet, and mobile views.

Heads up! This option may cause extra white space to display. If so, we recommend:

1. Add an Empty Block using Designer Pro.
2. Click into the block to add an image element from the element library.
3. Upload your image.