Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.


Homepage image and welcome message

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

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.

homepage image and welcome message

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.

  1. In the site tree, right-click on the Featured Background folder under your Home page.
  2. Select Create Page and choose OC Featured Background as the content type.
  3. Fill out the necessary fields.
  4. 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.
featured background page in the site tree

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:

  • On parent page and its child pages: will apply this background to the parent page of this OC Featured Background page and all its child pages. This option is helpful for when you want a section of your site to have a different background and for homepages.
  • On parent page only: will only apply the background to this OC Featured Background page's direct parent page. 

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:

  1. Navigate to the OC Featured Background page for your homepage.
  2. Select Update to create a new version of the page.
  3. Add or change the text in the Add homepage background message field.
  4. Publish your page.

Add homepage background message field

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.

What next?

Was this article helpful?
0 out of 1 found this helpful