Adding a dynamic background image

Example of a website using a dynamic background image
Example of a website using a dynamic background image

The following guide details how to add a background image to an entire site (discouraged) or to a single Panel page.

Sites currently using a dynamic background image include the International Office, uOttawa Card, Undergraduate student guideFinancial aid and awards, among others.

Governance

You need to discuss the addition of a background image with the Communications Directorate in order to have it reviewed and approved.

In terms of design, as a rule of thumb: (1) your image should not visually distract users from the content of the page, so avoid busy images, images with dark colours or images with text; (2) the image filesize should be as low as possible to not slow down page load, especially on mobile devices.

In terms of usage: Background images should only be used to make a bland, textual page more interesting. Given this, you should avoid having any other images or slideshows on a page that has a background image. It is also advised that you only add the background image to a single or select number of pages, as opposed to setting it site-wide.

1. Enabling the module and the permissions

  1. First, navigate to Modules and enable the following modules: "Dynamic background" and "Dynamic background panels". Once done, scroll to the bottom-left of the page and click on the button Save configuration.
  2. Next, navigate to People. At the top-right of the page, click on the tab Permissions. On this page, search for "Dynamic background" and "Dynamic background panels" and enable all the relevant permissions for the role "Administrator". Once done, scroll to the bottom of the page and click on the button Save permissions.

2. Configuring the settings

  1. Navigate to Configuration. Under USER INTERFACE, click on Dynamic background. Here, you should see a message stating that you have not yet configured Dynamic background. At the top-right of the page, click on the tab Settings.
  2. Under the Settings tab, enter the following values:
    1. Number of images: Enter the number of images you wish to upload.
    2. Upload path: Set this to "background".
    3. Allowed file types: Leave the default values.
    4. Image style: Set this to "No style".
    5. CSS selector: Enter "#page-wrapper".
    6. CSS: Copy and paste the attributes below.

      background-attachment: fixed;
      background-clip: border-box;
      background-color: transparent;
      background-origin: padding-box;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      height: auto !important;
      margin-bottom: -110px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      min-height: 100%;
      width: 100%;
  3. Once done, click on the button Save configuration.
  4. Repeat step 2.2 and 2.3 for the Panels tab located at the top-right of the page. If you do not see this tab, please verify the permissions (step1.2).

3. Uploading and adding the background image

  1. Continuing from Step 2, click on the tab Background Images located at the top-right of the page.
  2. Under Background image 1, click on the button Choose file to select the file you wish to use as a background. Repeat for any other images you wish to use. Once done, click on the button Save configuration at the bottom of the page to upload the file.
  3. Once the page reloads, you will see the option "Use picture as background" beside the image. Selecting this option will enable the image as a background image for the entire site.

    If you only wish to enable the background image on a specific page (Panel pages only), follow the steps below:
    1. Navigate to StructurePages. Edit the page where you want to display a background image.
    2. In the left navigation menu, click on General.
    3. At the bottom of the page, unravel the fieldset called Dynamic Background. You should see the images you added in step 3.2. Select the option "Use as background" to use the image as a background image. Once done, click on the button Update and save.
» Submit feedback
    Topics: 
  • Support
    Types: 
  • Tutorials
Back to top