When we create your site, we'll set up a background image in your theme or use an OC Featured Background page. This image is most visible on your homepage, but it also shows on all other pages of your site.
You may find that a section of your site devoted to a specific department needs to have a different look to it. In this case, you can use the OC Featured Background content type to change the background image for that section. You can also use multiple background pages so that the background image will alternate.
See it in action: compare the background image on our demo site's homepage to the library or LeisurePlex section.
For pages outside of the homepage, there will always be a wide content area that takes up the majority of your page. For this reason, 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.
Add a background image to a section 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.
Here's how to create a background for a section of your site:
- In the site tree, right-click on the parent page of the section you're working on and select Create Page.
- Select the OC Featured Background content type.
- Fill out the necessary fields.
- If you want this image to apply to the whole section of pages, ensure you select the On parent page and its child page option under Choose where to show featured background.
- Publish your page.
If your featured background is not displaying, ensure that you have published the top-level parent page for that section. In the example below, there is a second-level and third-level featured background page. Even though the "History Exhibit L2" page has been published, the "L2 Featured Background" and "L3 Featured Background" will not display on the live site until the "Point Russell Museum L1" page has been published.
Here is also a great video explaining how to do basic troubleshooting for your featured background:
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 appears when pages extend beyond the height of the image. |
| Fade from image to solid color 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. Note: this option will not be applied to featured background pages set into sections of your site. |
| 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. Note: this option will not be applied to featured background pages set into sections of your site. |
Add alternating background images
You can add various background images to a section of your site so that they shuffle randomly whenever a page in that section is loaded.
We recommend creating an OC Folder page to hold all of the background images.
- In the site tree, right-click on the parent page of the section you're working on.
- Select Create Page and choose OC Folder as the content type.
- Name your folder something descriptive, such as 'Background Images' then Publish your folder.
- Right-click on your new folder in the site tree and select Create Page.
- Select OC Featured Background as the content type, and fill out the necessary fields.
- Publish your page.
- Repeat steps 4-6 for as many backgrounds as you want.
Please note that this rotation is irregular; upon loading, the page will randomly select an OC Featured Background page in that section to display. Additionally, your background will not change while a user is on the page as the background is selected when the page loads.