From da4a2108f8e343016761ebf1e3fdf5cac8cfe1f5 Mon Sep 17 00:00:00 2001
From: thednp <thednp@users.noreply.github.com>
Date: Thu, 2 Jul 2020 10:57:32 +0000
Subject: [PATCH]

---
 demo/assets/css/spicr-theme.css | 12 +++++++++++-
 demo/index.html                 |  6 +++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/demo/assets/css/spicr-theme.css b/demo/assets/css/spicr-theme.css
index 2c7f1f9..a92055f 100644
--- a/demo/assets/css/spicr-theme.css
+++ b/demo/assets/css/spicr-theme.css
@@ -159,4 +159,14 @@ height:600px
     letter-spacing:-1px;
     margin:0 0 1.5rem
   }
-}
\ No newline at end of file
+}
+
+.background-top-left {  background-position: top left !important}
+.background-top-center {  background-position: top center !important}
+.background-top-right {  background-position: top center !important}
+.background-center-left {  background-position: center left !important}
+.background-center-center {  background-position: center center !important}
+.background-center-right {  background-position: center right !important}
+.background-bottom-left {  background-position: bottom left !important}
+.background-bottom-center {  background-position: bottom center !important}
+.background-bottom-right {  background-position: bottom right !important}
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 7194c26..701e076 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -78,12 +78,12 @@
     <div id="SpicrDemo" class="spicr spicr-slider" data-interval="false" >
       <div class="spicr-inner">
         <div class="item">
-          <div class="item-bg spicr-layer bg-blue" data-translate="x:-100%" data-duration="700" data-easing="easingCubicInOut" data-src="https://picsum.photos/id/992/1680/720.jpg">
+          <div class="item-bg spicr-layer bg-blue background-bottom-center" data-translate="x:-100%" data-duration="700" data-easing="easingCubicInOut" data-src="https://picsum.photos/id/992/1680/720.jpg">
             <div class="overlay"></div>
           </div>
           <div class="content-wrap h-100"> <!-- IE9 fix -->
-            <div class="d-flex align-items-center h-100">
-              <div class="flex-column w-md-50 text-center" style="margin: 0 auto">
+            <div class="d-flex align-items-end h-100">
+              <div class="flex-column w-md-50 text-center mb-5" style="margin: 0 auto">
                 <div class="spicr-layer" data-translate="x:-250" data-duration="600" data-easing="easingCubicInOut">
                   <h1>Welcome to KUTE.js!</h1>
                 </div>