Background and Image Sizes

Last Updated: Feb 02, 2016 02:55PM PST

To better prepare you for creating new campaigns on Classy, we put together a cheat sheet that defines all image dimensions and placements on your campaign. And in case you want to see the referenced images in action, go to a live page here! All images must be below 2 MB in file size, the file type must be JPG, PNG, or GIF, and the dimensions are highly recommended.

If you still have questions, feel free to reach out to our Support Team at support@classy.org.

To jump to a particular image, choose one below:

A. Logo Image
B. Header Image
C. Background Image
D. Banner Image
E. Media Section
F. Impact Bar
G. Sidebar Image

 

A. Logo Image

296 x 74px

This logo image will show in the top left hand corner of your campaign. It can also be uploaded as a square but should still be kept at 74 x 74px for best resolution.


B. Header Image

74 px tall

The Header Image will show up behind the top logo and can be Repeated, Centered or placed to the Left or Right of the Header space. If you'd like, you can simply choose to have a color background instead of uploading an image. It is completely up to you!

C. Background Image

Background Images can be tricky sometimes, simply because of the variety of images and screen sizes. Though they may take a bit of trial and error before they are perfect, these pixel recommendations are a great starting point.

Fixed Backgrounds: 2000px wide x at least 1200px-1400px tall and Scrolling Backgrounds: 2000 x 2000px. Note that "fixed" image backgrounds, or backgrounds that do not scroll with the page's content, are usually the easiest to work with.

Choosing the right Background Image...

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.

​For Peer to Peer and Event Campaigns the main content of the page spans 980px wide. Again, you may want to consider uploading an image that will viewable to the Left or Right of the main campaign content.

952 x 256px

The banner image should be sized at the exact above dimensions for best quality. If not, the image will be reoptimized by our system automatically, which could affect the image quality and make it appear pixelated

E. Media Section

590 x 372px

The Media section can hold up to five images and videos . For Peer to Peer Campaigns, your organization may want to leave a few media slots available so individual fundraisers can further personalize their pages.

F. Impact Bar (Pro Only)

980px wide

While there are no height restrictions, keep in mind that the longer the Impact Bar, the further the Media Section and Campaign Description will be pushed down the page, when expanded.

What the support team needs from you:

1. Image 980px wide
2. Color or Hex Code for the Impact Bar (e.g. #d7d7d7)
3. The Text for the Impact Bar (see: Just What is Giving Tuesday?)

300px wide

Again, no height restrictions here, but keep in mind that the sidebar content, (like the fundraiser leaderboard) will be pushed further down the page the longer this image is made.

Important Note: The Impact Bar and Side Bar Image need to be added by a member of the Classy Support Team. Once formatted, please send the image(s) to support@classy.org with the Event ID. The Event ID can be found at the end of the of your campaign URL.