Facebook Youtube Twitter Instagram Arrow Home More Menu

Full Height Background Image

Section I01. A cinematic intro section relying on a full-height background image.

To Be Available
Back To
Intro Sections
Almost no CSS knowledge needed!

Section I01 - A simple way to create a responsive full background image

Full-Height background image preview

Exceptionally easy to learn how to create a webpage by using our full height background sections. 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.

Intelligent Background Resizing

Styling the background image overlay

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

Intelligent Vertical Responsiveness

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

Retina and Mobile Optimized

Automatic responsiveness

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
Responsive full-height design
Cinematic backgroud image for a parallax webpage

Cinematic Image Look & Feel

  • intelligent full-height background resizing
  • image fitting automatically to its div
  • subtle parallax effect on scrolling
  • simple automatic styling
  • minimal CSS knowledge needed
  • learn more about using sections