Components

Hero

To be able to implement cover image into your site, you need to specify a class for a background cover image and also its height.

<div class="lt-background-cover lt-height-small" style="background-image: url(img/dragon_fly_1920.jpg);"></div>

Items, displayed on top of the cover image, can be inserted between 'div' tags of the image.

<div class="lt-background-cover lt-height-small lt-visible-large" style="background-image: url(img/dragon_fly_1920.jpg);"> <button class="lt-button-default lt-margin-top-medium lt-margin-left-medium">Button</button> </div>

You can apply visibility class to be able change cover images,depending on sreen size.

<div class="lt-background-cover lt-height-small lt-visible-large" style="background-image: url(img/dragon_fly_1920.jpg);"></div> <div class="lt-background-cover lt-height-small lt-visible-medium" style="background-image: url(img/cover_medium.jpg);"></div> <div class="lt-background-cover lt-height-small lt-visible-small" style="background-image: url(img/cover_small.jpg);"></div>