Header title

Lorem ipsum is simply dummy text of the printing

  1. Home
  2. Headers
  3. Image

Preview

Full screen
Full screen parallax
Parallax
Parallax ken burn

Usage

<header class="header-image" style="background-image:url(image.jpg);">
    <div class="container">
        <h1>Header title</h1>
        <h2>Lorem ipsum is simply dummy text of the printing</h2>
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Headers</a></li>
            <li><a href="#">Image</a></li>
        </ol>
    </div>
</header>

<header class="header-image ken-burn-out full-screen" data-parallax="true" data-natural-height="1080" data-natural-width="1920" data-bleed="0" data-image-src="image.jpg" data-offset="0">
    <div class="container">
        <h1>Header title</h1>
        <h2>Lorem ipsum is simply dummy text of the printing</h2>
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Headers</a></li>
            <li><a href="#">Image</a></li>
        </ol>
    </div>
</header>

Main settings

Name Type Description
Full screen CSS Add the class full-screen to the component to make it fullscreen. Use the attribute data-offset="123" to adjust the header height.
Parallax usage Information
  • Include the parallax script <script src='prototype/scripts/parallax.min.js'></script>
  • Add the attributes data-parallax="true" data-image-src="image.jpg" to the component.
Parallax options Information
data-bleed="123" Adjust the vertical image offset.
data-natural-width="123" Set the original image width. Use it to improve the image appearance.
data-natural-height="123" Set the original image height. Use it to improve the image appearance.
Ken burn CSS Add one of the following classes to the component to apply a background animation: ken-burn-in,ken-burn-center,ken-burn-out.
Light color CSS Add the class light to the component to convert all colors to white. Use this feature for dark backgrounds.
Alignment CSS Add the class align-center or align-right to the component to align in the center or align right the contents.
Try it Align center Align right
Code location Information For information about the code location of this component visit the start here page.
Header base
Header slider
Header video