Code snippets: Pages and backgrounds

  1. 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.

1 2 3 4 5 6 7 8 9 10 11 // 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

1 2 3 4 5 6 7 8 9 10 11 // 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; }