Dynamic Background Images

Elements including sections, rows, and columns can have either a background color assigned, or an image background. The background is set up in Cornerstone in the chosen element's Background Layers section in the Cornerstone sidebar.
Section with image background

Usage

  1. In Cornerstone, select the element you wish to assign an image background to. In this case we're giving the outermost Section container a image background.
  2. Click on the inspect button and find the Background Layers tab. Expand the content, and you should see similar options as seen on the right of the image.
  3. In the Type dropdown select your choice of background media such a static image or video. If using a video, .mp4 is the preferred file format. Free services like CloudConvert can convert your video to the correct format if necessary.
  4. Click the 'X' in the 'Image' box to clear our the placeholder image and then click the '+' sign to bring up the 'Add Media' screen.
  5. Either select a background image from the Media Library or use the Upload Files tab to upload a new image.
  6. Size and Position should generally be set to Cover and Center. Center is the vertical position of the background image. You can also use 'Top' or 'Bottom'. Try the different options to choose the one best suited to the selected element.
  7. Parallax would give a unique movement upon scrolling the page.
  8. Element with background height will not have a fixed height unless one is assigned to it via CSS. The height will automatically adjust to fit the outer element's top and bottom padding plus the height of the innermost (row > column) content.
  9. Some experimentation with margins, padding, and positioning of elements overlaying the image background may be necessary.
Image

Published on June 24th, 2020

Last updated on November 22nd, 2022