Recommended File Sizes - no larger than 200 KB
Background image sizes - optimal size is 1200 pixels wide x 500 pixels tall
For best use, they should not exceed 1500 pixels wide.
About Background Images
When choosing background images, think of images that are just that - meant to be in the background. Admins often want to use a photo they have in their file banks without thinking of where the image will go or the size of the image. Keep in mind that components using background images can appear in multiple places, all of different sizes. Novi will take the image you upload and pull from the center of the image - another reason to keep your images abstract. You should be looking for images that are:
- Large enough to look un-stretched if you choose to feature an event or article on your homepage.
- Abstract enough where it won't matter if a portion of the image is covered up or cut off in certain areas on the site.
- Only photos. As a best practice, do not includes graphics with words as a background images. This will look best from a scaling perspective and a design perspective.
Note: This does NOT mean that you have to use stock photos and can't use any images from your own events as background images. We highly encourage giving your association a personal touch! You just want to make sure that the photos you use reflect your association in a positive light. Instead of snapping quick, blurry pics at your next event, consider taking a couple of extra seconds to really get clear shots that you'd love to showcase on your site.
Here is a great example of an abstract background image that will scale and look professional in all instances:
On the opposite side, notice how the image below is stretched and blurry. That's because it started out really small. Also notice how the man's head is cut off because the image is not abstract. This would be a great photo for a static page, but also a perfect example of a photo that doesn't do so well as a background image:
Of course, this featured homepage section is not the only place background photos will appear. That's why it's extremely important that you choose versatile images. You will also find background images on:
- Homepage slider
- Sponsors section
- Static pages with the photo header template (same photo will be used for all static pages)
- Blog landing page
- Blog category page
- Event category page
- Event information pages
- Ecommerce product store & product detail page header
Have doubts about your image? Ask the Novi team!