lukin · paulwer · Aug 17, 2021 · Sep 6, 2021 · Sep 6, 2021 · Sep 6, 2021
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 # :wind_face: Keywind
 
-Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) and [Alpine.js](https://github.com/alpinejs/alpine).
+Keywind is a component-based Keycloak Login Theme with build-in customization options.
+Built with [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) and [Alpine.js](https://github.com/alpinejs/alpine).
 
 ![Preview](./preview.png)
 
@@ -29,6 +30,11 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
 - WebAuthn Error
 - WebAuthn Register
 
+### Customization Options
+
+- Background Video / Image
+- Company Logo in Background
+
 ### Identity Provider Icons
 
 - Apple
@@ -84,6 +90,11 @@ module.exports = {
 
 Read more about Tailwind CSS configuration in the [documentation](https://tailwindcss.com/docs/configuration).
 
+### Build-In Customizations
+
+Keywind ships with a few easy to use customization options. Customize these settings by editing the theme properties before deployment:
+`theme/mytheme/login/theme.properties`
+
 ### Components
 
 You can update Keywind components in your own child theme. For example, create a copy of the `body` component and change the background:

diff --git a/theme/keywind/login/components/atoms/background.ftl b/theme/keywind/login/components/atoms/background.ftl
@@ -0,0 +1,13 @@
+<#macro kw>
+  <#if properties.topLeftLogoUrl??>
+    <img src="${properties.topLeftLogoUrl}" class="fixed z-10 top-4 left-8">
+  </#if>
+  <#if properties.backgroundImageUrl??>
+    <img src="${properties.backgroundImageUrl}" class="fixed top-0 left-0 right-0 bottom-0 min-h-full min-w-full opacity-20" style="max-width: none !important;">
+  </#if>
+  <#if properties.backgroundVideoUrl??>
+    <video autoplay loop muted playsinline class="fixed top-0 left-0 right-0 bottom-0 min-h-full min-w-full opacity-20" style="max-width: none !important;">
+      <source src="${properties.backgroundVideoUrl}" type="${properties.backgroundVideoType!''}" />
+    </video>
+  </#if>
+</#macro>
diff --git a/theme/keywind/login/components/atoms/body.ftl b/theme/keywind/login/components/atoms/body.ftl
@@ -1,5 +1,5 @@
 <#macro kw>
-  <body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
+  <body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16 overflow-x-hidden">
     <#nested>
   </body>
 </#macro>
diff --git a/theme/keywind/login/components/atoms/container.ftl b/theme/keywind/login/components/atoms/container.ftl
@@ -1,5 +1,5 @@
 <#macro kw>
-  <div class="max-w-md space-y-6 w-full">
+  <div class="relative z-10 max-w-md space-y-6 w-full">
     <#nested>
   </div>
 </#macro>
diff --git a/theme/keywind/login/theme.properties b/theme/keywind/login/theme.properties
@@ -2,3 +2,9 @@ parent=base
 
 styles=dist/index.css
 scripts=dist/index.js
+
+# Customization Section
+topLeftLogoUrl=
+backgroundImageUrl=
+backgroundVideoUrl=
+backgroundVideoType=video/mp4