The parallax background helps give movement to a page and provides highlight to key text or calls to action. It is used on landing pages to break up content and provide context to key text or a quote. When used with the parallax option it helps give movement to the page. This elevates the content beyond regular government messaging.
On this page
Adding a Parallax background on a Landing page
To add this to a Landing page, create an 'Edge to edge' section then type in ‘background’ on the search box when adding a block to a page. Select DCS Content Background Block under DCS.
Standard Parallax
- Background block variant: Overlay.
-
Background image: enter the media library image title.
- Note: you are not directed to the media library to search for the image. Enter the image title.
- Suggested image size: 3:2 ratio, 1920 x 1280 pixels.
- Colour code (optional): default is white. Enter the Hex code of the new background colour required.
- Background parallax effect: select Parallax background.
- Text: WYSIWYG - text entered here will appear as an overlay on the image background.
Two column - WYSIWYG
- Background block variant: Two Column - WYSIWYG.
-
Background image: enter the media library image title.
- Note: you are not directed to the media library to search for the image. Enter the image title.
- Suggested image size: 3:2 ratio, 1920 x 1280 pixels.
-
Background colour: defines the colour for the background of the content section.
- White
- Brand light
- Brand dark
- Background parallax effect: Select Parallax background.
- Text: WYSIWYG - text entered here will appear in the text area to the right of the image.
Two column - Statistics
- Background block variant: Two Column - Statistics.
-
Background image: enter the media library image title.
- Note: you are not directed to the media library to search for the image. Enter the image title.
- Suggested image size: 3:2 ratio, 1920 x 1280 pixels.
-
Background colour: defines the colour for the background of the content/statistic section.
- White
- Brand light
- Brand dark.
- Background parallax effect: Select Parallax background.
- Icon: select an icon/pictogram from a predetermined list.
- Item value: Numbers, letters, special characters, can be entered.
- Statistic body text: WYSIWYG - text entered here will appear below the statistic value.
-
Unit: used to add a unit value to the Item value, for example, km, m, %.
- Unit value will display as superscript.
- You can also select whether to Display current item or not on the page.
- Note: you can create a maximum of 2 statistic items in this block. The statistic value does not animate.
Guidelines
- It should only be used on full-width pages (like landing pages, not content pages).
- It can be used to highlight specific text with or without a CTA button
- Supports edge to edge full width only
- There is a limit of 2-3 used per page. If more than one is to be used on a page there needs to be content place between the background image components.
- You cannot use this for images only. There must always be text included in the banner also.
See this live on nsw.gov.au
Check out Parallax Variations to see how this works on a live page.
You can also see live examples of how agencies have used the component below:
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.