Registration with Fundraising Event Background and Image Sizes

Last Updated: May 17, 2017 08:00AM PDT


Before you get started with designing your Registration with Fundraising event, we highly recommend that you bookmark this page. It contains all image dimensions and recommended image placements for your event pages, so they look pixel perfect on any device.

Image Requirements:

- Under 2 MB in file size,
- JPG, PNG, or GIF
- We highly recommend you use the following image dimensions.

Jump to a particular image:

A. Header Logo
B. Hero Block
C. About Block
D. Progress Circle
E. Registration Block
F. Footer Logo

Jump to a particular image:

G. Header Logo
H. Cover Photo
I. Default Team Photo
J. Story Images & Videos
K. Footer Logo

Jump to a particular image:

L. Header Logo
M. Cover Photo
N. Default Photo
O. Story Images & Videos
P. Footer Logo

Q. Donation and Thank You Page Background Images

R. Glossary of Terms

 

300px x 75px (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. Hero Block

1280px x 720px (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 100px 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 rather than within your Hero 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.

C. 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 1350px).
 

D. Progress Circle Block

1280px x 720px (recommended)

Important Background Image Recommendations:

- To keep distractions to a minimum, set the image you upload to a lower opacity with a dark background color and white text.

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

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. Header Logo

300px x 75px (recommended)

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

H. Cover Photo

1400px x 460px (recommended)

The Cover Photo is the most prominent image on a Team Fundraising page. This allows you to set the tone for the page and provide some great visuals to show what this team is fundraising for. The Team Captain does have the ability to change the Cover Photo for their team page, but it is always wise to include a default photo, because many teams do not take advantage of that customization option.

Important Cover Photo Recommendations:

- The Header on the Team Page will always cover the top 100px of your Cover Photo. One way to ensure that your Cover Photo can be seen completely is to set the opacity of your Header to 0.

- Using Cover & Fixed for this photo is not recommended for this image. This setting will set the image to cover the entire height and width of the screen, not just the viewable area for the Cover Photo. Using Stretch is the recommended positioning for Cover Photos.

I. Default Team Photo

320px x 320px (recommended)

Although Team Captains do have the ability to replace your Default Photo with their own photo, it is always wise to add a default photo to your team template because not every team will update their photo. This gives you another chance to get your organization's branding out there, or to create an event specific image that relates to what the team is raising money for.

J. Story Images & Videos

590px x 332px (recommended)

300px x 50px (recommended)
590px x 332px (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.

 

L. Header Logo

300px x 75px (recommended)

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

M. Cover Photo

1400px x 460px (recommended)

The Cover Photo is the most prominent image on an Individual Fundraising page. This allows you to set the tone for the page and provide some great visuals to show what this individual is fundraising for. The fundraiser does have the ability to change the Cover Photo for their page, but it is always wise to include a default photo, because there will be some fundraisers that do not take advantage of that customization option.

Important Cover Photo Recommendations:

- The Header on the Individual Fundraising Page will always cover the top 100px of your Cover Photo. One way to ensure that your Cover Photo can be seen completely is to set the opacity of your Header to 0.

- Using Cover & Fixed for this photo is not recommended for this image. This setting will set the image to cover the entire height and width of the screen, not just the viewable area for the Cover Photo. Using Stretch is the recommended positioning for Cover Photos.

N. Default Photo

320px x 320px (recommended)

Although Fundraisers do have the ability to replace your Default Photo with their own photo, it is always wise to add a default photo to your page template because not every fundraiser will update their photo. This gives you another chance to get your branding out there, or to create an event specific image that relates to what the individual is raising money for.

O. Story Images & Videos

590px x 332px (recommended)

300px x 50px (recommended)
590px x 332px (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.

Q. Donation and Thank You Page Background Images

1400px x 720px (recommended)

For Donation Pages, the checkout form runs through the very center of the page. When uploading a background image, you may want to consider using an image where the main focus takes up the left or 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.

R. 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.