Ticketed Events Background and Image Sizes

Last Updated: Mar 14, 2018 03:14PM PDT



Before you get started with designing your Ticketed or Registration event, we highly recommend that you bookmark this page. It contains the recommended image dimensions and some design tips for your assets so they can look great on any device.

Image Requirements:

- Under 2 MB in file size,
- JPG, PNG, or GIF

Jump to a particular image:

A. Header Logo
B. Headline Image
C. Hero Block
D. About Block
E. Registration Block
F. Footer Logo

G. Donation and Thank You Page Background Images

H. Glossary of Terms

 

300px x 50px (recommended)

Add your organization logo or a specific logo to your event. The logo is displayed in the left-hand corner of your event pages. You can also use a square image. If you use a square image we recommend 55px x 55px for best resolution.

B. Headline Image

700px x 250px (recommended)

Utilize a Headline Image instead of text to inject more branded logos or messaging that use custom fonts and styles that Classy does not support by default.

Important Headline Image Recommendations:

- The Headline Image feature was designed to provide organizations an outlet for adding branded content and/or messaging to their Hero Block. Adding important content directly within your Hero Background image can have some undesired outcomes on different screen sizes, but the Headline Image is 100% mobile responsive so it's edges will never get cut off due to the size of your screen.

C. Hero Block

1280px x 910px (recommended)

The Hero Block is the most prominent content block on the landing page. Think of it as your first opportunity to make your impression on potential registrants for your event. The image falls behind the headline and the Header of your page, so it is important be aware of those two things when designing your Hero Background Image.

Important Hero Image Recommendations:

- The Header of your event Landing Page will always cover the top 115px of your Hero Image. One way to ensure that your Hero Image will not be covered up at all is to set the opacity of your Header's background color to 0.

- Due to our pages being completely mobile responsive, the portion of your Hero Image that will display varies depending on the screen size of the device you are viewing the page through. If your Hero Image includes important text or content that you want to make sure always displays, regardless of screen size, consider adding that text to your Headline Image rather than within your Hero Background Image so it does not get cut off as the image scales to fit the screen size.

We created guideline images for you, so your headline plays nice on any device. Click to download the Headline PSD and PNG Guide ImagesThe download will start automatically as a ZIP file. Check your Downloads folder for the ZIP file called "downloadable-headline-guides.zip"

- The recommended position for a Hero Background Image is Cover & Fixed or Stretch for optimal coverage. If you select Center, the Hero Background Image will not scale with the size of the screen.

D. About Block

1280px x 720px (recommended)

The About Block gives you room to tell supporters about your event and what participating in or fundraising for your event can do for your organization and the programs you run.

Important About Block Image Recommendations:

- To keep distractions to a minimum, use something simple, like a pattern image, or set the image you upload to a lower opacity.

- The recommended position is Cover & Fixed or Stretched for best quality. Note that if you choose to center the About Block Image, you might see the edges of the image on larger screens (anything wider than 1280px).
 

E. Registration Block

1280px x 720px (recommended)

Remind your supporters of how exciting and fun this event will be with a great background image here. We recommend making this different than the Hero Block Background Image. Show a photo from a past event or an inspiring image of the ways your organization is making an imapct.

300 x 50px (recommended)
590 x 55px (max)

The footer logo will show up in the bottom left-hand corner of the page. It can also be uploaded as a square, but should be kept at 55px x 55px for best resolution.

 

G. Donation and Thank You Page Background Images

1280px x 910px (recommended)

For Donation Pages, the checkout form runs left of center on the page. When uploading a background image, you may want to consider using an image where the main focus takes up the right side of the photo so it does not get covered by the donation checkout form. The same rule applies to the Thank You Page.

H. Glossary of Terms

Background Image Position - Most of the background images have positioning settings that you can use to arrange the image within the corresponding block.

1. Adaptive Cover - image will be centered and stretch the full vertical height of the block, but the horizontal sides will be cropped off as the width of screen shrinks.
2. Center - image will be centered within the content block.
3. Tile - image will be repeated horizontally and vertically to cover all viewable space within the content's container.
4. Stretch - image will stretch to match only the width of the user's screen resolution.
5. Cover & Fixed - the image is stretched to accommodate the height and width of the user's entire screen and is locked in place so it will not scroll with the page. This gives the page a very cool, three dimensional effect.

Image Editing - Some aspects of certain images can be altered with some basic editing tools.

1. Opacity - this setting affects the image's transparency. The higher the Opacity % the less transparent the image is. The lower the Opacity % the more transparent the image becomes. (not available for all images)
2. Blur - this setting affects how blurry the image appears. The higher the Blur % the more the image will be blurred. The lower the % the clearer image will be. (not available for all images)

Still have questions on image sizing for your Registration with Fundraising event? Feel free to reach out to Classy Support for assistance.