The event landing page background image alignment changes from screen to screen since it adjusts based on screen size. What your monitor shows you can show differently (possibly cut off towards the top) on another person's monitor. In order to avoid the top of the background image getting cut off, we recommend aligning the focal point of the images toward the center of the screen.
Essentially, if you create some padding around your image, that will pull it down for optimal alignment
This is best demonstrated with a background that includes the event name, date, and/or an image.
For example, let's say you'd like this to be the event background:
When you upload it as a background image, on some smaller monitors, it will appear as:
On larger monitors, the background image area may not be as limited, and can look fully in tact as shown below:
This is why we recommend expanding the space around the edges of the background image. Increasing padding around the border to continue the graphics of the image will push the focal point to the middle of the screen.
Another thing to keep in mind is the shadow overlay we include on the event page. It works very nicely for events that include the title over the event image as shown below:
As you can see, it brings the background, foreground, and additional details together smoothly for a refined transition to the eye. This is our default recommendation for events, however, we urge people to get creative and customize their events to look exactly as they like. This is why we have the option to embed the date and title into the background image.
- The recommended dimensions of the image are 1024px by 768px
- Keep readable/important content within a 10% border of the image
- If you want content centered across any axis, the content should just be in center of the image and it will reflect in the center of splash screen (but the borders still should at least be 10% on either side).
- The focal point is 50%, 50% (the center of the image)
- The gradient overlay is aligned to the bottom of the image, and its height is 60%px relative to the size of the user's window
- The border radius is 0px