The homepage background image fits behind the content on your homepage. It can be set to start from the top of your header and into a background color. It can also include a welcome message to help set the tone of your site.
Your background image is pulled from either your theme or OC Featured Background pages, depending on how your theme is set up. Generally, background images sourced from your theme get overridden by OC Featured Background pages.
Homepage background images can be tricky to get right. For this reason, we work with you to find the best image for your theme as we're creating your site. If you want to change it, we recommend using images that lack a distinct focal point so they'll look good across a variety of pages and devices. You can find more tips in our best practices article.
Before you start
Before you start working on your homepage background image, watch this helpful video to get a better understanding of where your image is coming from.
Add a background image to your homepage
Your background image can be sourced from a few different places. Most likely, we will have set one up in your theme when we create your site. However, if we haven't, you can use the OC Featured Background content type to change it.
- In the site tree, right-click on the Featured Background folder under your Home page.
- Select Create Page and choose OC Featured Background as the content type.
- Fill out the necessary fields.
- Publish your page.
This background image will apply to all pages that don't have an alternative featured background image in their section of the site.
What to include on your Featured Background page
Use the following information to fill out the page fields of your background page:
| Field | Function |
| Page name | Completes the unique page URL |
| Choose where to show featured background (skips OC Folder pages) |
Choose how to apply this image:
Child pages will always take their background image from their closest parent. |
| Add background image |
Select Add Image and navigate through the Files Library to the image you want to use. The best dimensions for a background image vary, but we recommend using an image at least 2000px wide, with no clear focal point. |
| Add background colour code | Add a hexadecimal color code for the background of the page. This color is used when pages extend beyond the height of the image. |
| Fade from image to solid colour when image is shorter than the page |
Check 'Yes' if you want to gradually fade from the image to your background color when a page is longer than the image. Note: if you've made custom CSS changes to the background image feature, this setting might not work as expected. |
| Add homepage background message | Add text to be displayed over the homepage image. This could be a welcome message or a tagline for your city or council. For example, on our demo site, our background message is set to: 'Ranked World's most sustainable city.' |
| Add link URL | Add a link to your homepage background message by selecting Insert links and using the Select an internal link icon to navigate to an internal page. |
Update your welcome message
To update your homepage background message or change any other fields:
- Navigate to the OC Featured Background page for your homepage.
- Select Update to create a new version of the page.
- Add or change the text in the Add homepage background message field.
- Publish your page.
Welcome messages are tied to their background image. If your site has multiple rotating background images, you’ll need to enter the same welcome message for each image.