Background Image Guidelines
While these are not mandatory, your background images should ideally be:
- In .jpg format.
- Have a file size less than 500kb.
- Horizontally rectangular in shape (there is no specific ratio).
Implementing Background Images
You can have one or multiple background images in the hero section of a page. If multiple, they will rotate by fading in and out. While you can technically have as many as you want, our recommended maximum number is five.
- Go to that page's Settings → Featured content sliders to create your first background image.
- Enter something descriptive in the Label field. For example, if it's a picture of a person on a bench, you could title it Person on Bench.
- The Headline field allows you to reposition your image inside its "frame" without having to crop it. If you don’t need to do this, leave this field blank. Otherwise, see the section below titled Repositioning Background Images.
- In the Page to feature field, enter the current page's Slug.
- Click Choose File and upload your image.
- Repeat for as many background images as you want on that page.
Repositioning Background Images
Sometimes an important part of the image gets cut off on the website. By default, the image you uploaded is centered in it's frame. To adjust the position of the image without having to crop it:
- Go to that specific Featured content slider's → Headline field.
- Enter two values in either of the following formats:
- center center
- 50% 50%
The first value determines the image's horizontal positioning and the second its vertical positioning.
You can use center, right, or left for the first value and center, top, or bottom for the second value.
|right center||Moves image left.|
|left center||Moves image right.|
|center top||Moves image down.|
|center bottom||Moves image up.|
|right top||Moves image left and down.|
|All other combinations omitted...||...for brevity are acceptable.|
For more precision, use percentages from 0 → 100:
|0% 50%||Moves image left.|
|100% 50%||Moves image right.|
|50% 0%||Moves image down.|
|50% 100%||Moves image up.|
|25% 75%||Moves image halfway left and halfway up.|
|All other values and combinations omitted...||...for brevity are acceptable.|