Code snippets: Pages and backgrounds

Add a background image to a navigation page

Use the module ‘asset bundle’ if you want to upload your images in Ocularium: https://ocular.atlassian.net/l/c/ymc8q9Xg

Rule 9 is added if you added already a background in your module but you want to override it with the css styling. A background in a module has prior on a background in CSS.

// replace '1234' with the correct id (as seen in Developer Tools)
.page--nav--1234 {
  background-image: url("https://via.placeholder.com/1920x1080");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.page--nav--1234 .background {
  display: none;
}

2. Add a background to a module

// replace '1234' with the correct id (as seen in Developer Tools)
.page--1234 {
  background-image: url("https://via.placeholder.com/1920x1080");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

.page--1234 .background {
  display: none;
}