Section I01. A cinematic intro section relying on a full-height background image.
Exceptionally easy to be used! You barely need to know CSS! Just replace placeholder images and properties!
No matter if you want to create a one pager landing page or a specific page for your website, the full height background image section (section I01) could be the perfect choice to be used immediately after your navigation.
The overlay with text and call-to-actions floating on top of the full-height section could be automatically styled by applying a single parameter. For example, you could make it too look as a black or white overlay on top of the background image. Upon case the text, headlines, links, and buttons from the text overlay will auto-adapt to the applied background color. See Basic8 style guide to learn more about intelligent styling (no CSS knowledge needed).
This section it is ideal to be used at the start of a webpage or at the beginning of a parallax landing page. On many notebook & standard screen viewports the section will also provide a hint (either a thin line below the background image, or a next arrow, or both) that more content follows on the page, encouraging users to scroll. This line below the background image, together with the next section arrow will act as a hint for the users that there is more content below. Thus, depending on the scenario the background image could stretch less than 100% screen viewport height (i.e. when on huge screens) or more than 100% height (on small mobile devices and viewports).
Designed to automatically adapt to viewports from small mobile devices to large screens. The section will automatically resize its background image height and width to fit various responsive scenarios (i.e. on mobile devices optimized rendering will take precedence over full-height rendering). 4
View more sections
