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.
- 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.
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 in this article, submit a request via the webform.