Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris.

Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolore.

Usage

<section class="section-image" style="background-image:url(image.jpg)">
    <div class="container">
    
    </div>
</section> 

<section class="section-image" data-parallax="scroll" data-image-src="image.jpg">
    <div class="container">
    
    </div>
</section>

Settings

Name Type Description
Background image CSS Add the attribute style="background:image:url(image.jpg) to the section to set the background image.
Parallax -- Add the attributes data-parallax="scroll" and data-image-src="image.jpg"to the section to set the background parallax image. This feature require the installation of the parallax plugin: 
<script src="themekit/scripts/parallax.min.js"></script>
Parallax
ken burn animations		 CSS Add one of the following classes to the section to apply a background animation.
ken-burn-in Zoom in animation with bottom right translation.
ken-burn-out Zoom out animation with bottom right translation.
ken-burn-center Centered zoom in animation.
Parallax bleed HTML Add the attribute data-bleed="123" to set the vertical overflow of the background image. Default 70px.
Light color CSS Add the class light to the section to convert all colors to white. Use this feature for dark backgrounds.
Try it Light
Full screen CSS Add the class full-screen to the section to set the height of the section to full screen. Use the attribute data-offset="123" to adjust the header height.
Try it Full screen
Full width CSS Add the class section-full-width to make the section full width.
Add the class section-full-width-left to make the section full width only on left.
Add the class section-full-width-right to make the section full width only on right.
Full width right and left sections require two col-lg-6 as main content.
Try it Full width
Center alignment CSS Add the class section-center to the section to vertically center the content inside it.
Try it Align center
No padding CSS Add the class no-padding-y to remove the vertical padding, the class no-padding-x to remove the horizontal padding and the class no-padding to remove both padding. Add the class no-padding-top or no-padding-bottom to remove only the top or bottom padding.
Try it No padding y No padding x No padding No padding top No padding bottom
Code location Information The sections must be placed inside the <main> </main> code block. For more details visit the getting started page.
Section base
Section slider
Section video
Section block
Section map