Peer-to-Peer Campaign Background and Image Sizes

Last Updated: Feb 03, 2017 09:31AM PST

Before you get started with designing your Peer-to-Peer campaign, we highly recommend that you bookmark this page! It contains all image dimensions and recommended image placements for your Peer-to-Peer campaign.

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. Impact Block
E. Fundraising Levels
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

 

412px x 77px (recommended)

Add your organization logo or a specific logo to your Peer-to-Peer campaign pages. The logo is displayed in the left-hand corner of your campaign 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

1440 x 910px (recommended)

The Hero Block is the most prominent content block on Peer-to-Peer campaigns. Think of it as your first opportunity to make your impression on potential fundraisers for your campaign. 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 campaign 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, make sure to add that text to your Headline rather than within of your Hero Image.

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

1350px x 508px (recommended)

The About Block gives you room to tell supporters about your campaign and why it's important they invest in your cause.

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. Impact Block Background Image

1350px x 720px (recommended)

Important Impact Background 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 Impact Block Image, you might see the edges of the image on larger screens (anything wider than 1350px).

E. Fundraising Levels

315px x 210px

Fundraising Levels help your supporters choose a specific fundraising goal for their fundraising page. By showing how their effort directly impacts your cause, your supporters will be motivated to raise more for your organization. Make sure to use compelling and eye catching images that will inspire your supporters!

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

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

G. Header Logo

412px x 77px (recommended)

Add your organization logo or a specific logo to your Peer-to-Peer campaign pages. 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

1400 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 branding out there, or to create a campaign 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 a fundraising page. It can also be uploaded as a square, but should be kept at 55px x 55px for best resolution.

L. Header Logo

412px x 77px (recommended)

Add your organization's logo or a specific logo to your Peer-to-Peer campaign pages. 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

1400 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 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 a campaign 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 your campaign. 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

1400 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. Center - image will be centered within the content block.
2. Tile - image will be repeated horizontally and vertically to cover all viewable space within the content's container.
3. Stretch - image will stretch to match only the width of the user's screen resolution.
4. 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 your campaign 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 Peer-to-Peer campaigns? Feel free to reach out to Classy Support for assistance.