Donation Page Campaign Background and Image Sizes

Last Updated: Oct 04, 2017 10:31AM PDT


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

Image Requirements:

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

A. Donation and Thank You Page Background Images

B. Glossary of Terms

 

A. Donation and Thank You Page Background Images

1280 x 720px (recommended)

When designing your Donation Page's background image, it is important to remember that the checkout form is slightly off-center toward the left, so you will have more visible area on the right side of the screen. When choosing 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.

Pro Tip: using the Stretch or Cover & Fixed are our favorite background position settings because they ensure that your image will always cover the entire screen. Additionally, Cover & Fixed gives the page a cool three dimensional effect by leaving the image fixed in place as the page scrolls over the top of it.

B. 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 will ensure the image covers the entire visible background area no matter what size your image is.
2. Center - Image will be centered within the page.
3. Tile - Image will be repeated horizontally and vertically to cover all viewable space within the page.
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 your campaign a very cool, three dimensional effect.

Still have questions on image sizing for Peer-to-Peer campaigns? Feel free to reach out to Classy Support for assistance.