Image background title

Lorem Ipsum is simply dummy text of the printing


Background image Full screen Full screen parallax Parallax Parallax ken-burn


<script src='../HTWF/scripts/parallax.min.js'></script>


<div class="header-title white ken-burn" data-parallax="scroll" data-position="top" data-natural-height="550" data-natural-width="1366" data-image-src="">
    <div class="container">
        <div class="title-base">
            <hr class="anima" />
            <p>Lorem Ipsum is simply dummy text of the printing.</p>

Main settings

Name Type Description
Ken burn animations CSS class Add class ken-burn to title object. Example: <div class="header-title ken-burn" data-parallax="scroll" data-position="top" data-image-src="image.jpg" data-natural-width="123" data-natural-height="123"> ... </div>.

You can use 3 built-in ken burn animations:
Class name Description
ken-burn Zoom in animation with bottom right translation.
ken-burn-out Zoom out animation with bottom right translation.
ken-burn-center Centered zoom in animation.
Settings HTML Set attributes data-parallax="scroll" data-image-src="image.jpg" of title object.
White CSS Add class white to the container object to convert all colors to white. Use this feature for dark backgrounds.
Overlay pattern Mixed Add the code <div class="bg-overlay dotted"></div> into the title, as first row.
Overlay pattern is a feature of Javascript and CSS, complete documentation and patterns list here
Code location Information Insert the title code just belove header code. Example:
    <div class="header-title ken-burn">
    <div class="section-empty">
        <div class="container content">