Heading Level 3
The parallax effect will display better if there is something below the images too. If you want to have an image right at the bottom of a page, it will be better not to have it inside any parallax container. And remember that the parallax pages will need enough height to enable scrolling.
Parallax
The parallax classes in Materialize do not like to have any wrapping container around themselves, therefore the normal heading and navigation for this site cannot be used. In order to get back to the other pages, please use the back button provided.
The parallax images, when displayed, have a default height of 500px. You can override this by adding an extra class to the container .parallax-container, something like e.g. 'parallax-700' or -'400'. Then you can set the height differently, more or less than 500px.
Important is, however, that the image files must have more height than what you choose to let show. If not, you will hardly see any 'parallax movement' at all. Here the aspect ratio is 1:0.8.
The size limitation on the container .parallax-holdall can be changed to less, or also to full width.
The second downloadable file has full width and a text layer on top of the parallax image. It also demonstrates the mentioned second class name on the container .parallax-container, and a height of 650px set on that element.
Download this component (displayed)
Download the full width component
Go Back