Switched background image SVGs into regular images, made logo go over the top of the menu on mobile.

public/page/home/sections/BannerSection.jsx

@@ -33,13 +33,12 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
 export default (props) => {
   return (
     <ImageSection
+      className="p-home-page__banner"
       src={ require('./../../../images/banners/about/glasses.svg') }
       alt="domsPlace"
       width="2400"
       height="1200"
-      test="true"
       loadable
-      due
     >
       <PageBoundary full>
         <FloatingContentBox position="middle center" size="large" className="u-text-center">

public/page/home/sections/ExistingWorkSection.jsx

@@ -24,7 +24,7 @@
 import React from 'react';
 import Language from './../../../language/Language';
 import { PageBoundary } from './../../Page';
-import Section, { SplitSection, Split, ClearSection } from './../../../section/Section';
+import { ImageSection, SplitSection, Split, ClearSection } from './../../../section/Section';
 import ContentBox from './../../../content/ContentBox';
 import { Title, Subtitle, Paragraph, Heading1, Heading2 } from './../../../typography/Typography';
 import { Button } from './../../../input/Input';
@@ -111,7 +111,12 @@ const ExistingWorkFrame = (props) => {
 
 export default (props) => {
   return (
-    <Section className="p-home-page__promo p-home-page__promo-work">
+    <ImageSection
+      className="p-home-page__promo p-home-page__promo-work"
+      src={ require('./../../../images/patterns/arcade.svg') }
+      loadable
+      background
+    >
       {/* Title */}
       <PageBoundary small>
         <ElementScrollFader from="left">
@@ -176,6 +181,6 @@ export default (props) => {
 
         <ClearSection />{/* Space a bit */}
       </PageBoundary>
-    </Section>
+    </ImageSection>
   );
 }

public/page/home/sections/PlatformsSection.jsx

@@ -24,7 +24,7 @@
 import React from 'react';
 import Language from './../../../language/Language';
 import { PageBoundary } from './../../Page';
-import Section, { ImageSection, VideoSection, SplitSection, Split } from './../../../section/Section';
+import { ImageSection, SplitSection, Split } from './../../../section/Section';
 import FloatingContentBox from './../../../content/FloatingContentBox';
 import ContentBox from './../../../content/ContentBox';
 import Image from './../../../image/Image';
@@ -34,7 +34,7 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
 
 const Platform = (props) => {
   let children;
-  let image = <Image src={props.src} loadable className="p-home-page__brands-image" />;
+  let image = <Image src={props.src} loadable className="p-home-page__brands-image" width="96" height="96" />;
 
   if(props.to) {
     children = (
@@ -55,7 +55,12 @@ const Platform = (props) => {
 
 export default (props) => {
   return (
-    <Section className="p-home-page__promo p-home-page__promo-platforms">
+    <ImageSection
+      className="p-home-page__promo p-home-page__promo-platforms"
+      src={ require('./../../../images/patterns/game-show.svg') }
+      loadable
+      background
+    >
       <PageBoundary>
         <ElementScrollFader from="left">
           <Title className="u-text-center p-home-page__brands-title">
@@ -184,6 +189,6 @@ export default (props) => {
           </Subtitle>
         </ElementScrollFader>
       </PageBoundary>
-    </Section>
+    </ImageSection>
   );
 }

public/page/home/sections/ProgrammingSection.jsx

@@ -25,14 +25,19 @@ import React from 'react';
 import { connect } from 'react-redux';
 import Language from './../../../language/Language';
 import { PageBoundary } from './../../Page';
-import Section from './../../../section/Section';
+import { ImageSection } from './../../../section/Section';
 import ContentBox from './../../../content/ContentBox';
 import { Title, Paragraph, Heading1 } from './../../../typography/Typography';
 import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
 
 export default (props) => {
   return (
-    <Section className="p-home-page__promo p-home-page__promo-programming">
+    <ImageSection
+      className="p-home-page__promo p-home-page__promo-programming"
+      src={ require('./../../../images/patterns/rhythm-heaven.svg') }
+      loadable
+      background
+    >
       <PageBoundary small>
         <ElementScrollFader from="bottom">
           <ContentBox box>
@@ -43,6 +48,6 @@ export default (props) => {
           </ContentBox>
         </ElementScrollFader>
       </PageBoundary>
-    </Section>
+    </ImageSection>
   );
 }

public/section/image/ImageSection.jsx

@@ -27,6 +27,8 @@ import Image from './../../image/Image';
 
 export default function(props) {
   let image;
+  let clazz = "c-image-section";
+
   if(props.image) {
     image = props.image;
   } else {
@@ -37,10 +39,17 @@ export default function(props) {
     />;
   }
 
+  if(props.className) clazz += " " + props.className;
+
+  if(props.background) {
+    //Background Image Effect
+    clazz += " is-background";
+  }
+
   return (
     <Section
       full={props.full}
-      className={"c-image-section" + (props.className ? " " + props.className : "" ) }
+      className={ clazz }
     >
       { image }
       <div className="c-image-section__content">

public/styles/components/_image-section.scss

@@ -5,10 +5,9 @@
  *  Dependencies:
  *
  *  Version:
- *    1.0.0 - 2018/05/11
+ *    1.1.0 - 2018/08/14
  */
 .c-image-section {
-  position: relative;
 
   &__image {
     display: block;
@@ -16,6 +15,8 @@
   }
 
   &.is-full {
+    position: relative;
+    
     .c-image-section__image {
       @include t-absolute-fill();
       object-fit: cover;
@@ -32,4 +33,28 @@
       width: 100%;
     }
   }
+
+  //Background Image
+  &.is-background {
+    position: relative;
+
+    .c-image-section {
+      &__image {
+        @include t-absolute-fill();
+        object-fit: cover;
+        object-position: bottom center;
+      }
+
+      &__content {
+        position: relative;
+
+        &-inner {
+          position: relative;
+          height: 100%;
+          width: 100%;
+        }
+      }
+    }
+  }
+
 }

public/styles/components/_navbar.scss

@@ -10,7 +10,7 @@
  *    styles/tool/list.scss
  *
  *  Version:
- *    1.0.0 - 2018/05/03
+ *    1.1.0 - 2018/08/14
  */
 $c-navbar--link-thickness: 5px;
 
@@ -40,6 +40,9 @@ $c-navbar--link-thickness: 5px;
   }
 
   &__logo {
+    //To Allow the logo to go over the top of the menu!~
+    position: relative;
+    z-index: $s-z--logo;
     width: 7em;
   }
 

public/styles/objects/_loadable-image.scss

@@ -22,7 +22,6 @@
 }
 
 .o-loadable-image {
-  position: relative;
 
   &__image-container {
     opacity: 1;
@@ -31,6 +30,8 @@
   }
 
   &.is-loading {
+    position: relative;
+    
     @include t-animation-name(o-loadable-image--load-flash);
     @include t-animation-timing-function(linear);
     @include t-animation-duration(2s);

public/styles/pages/_home-page.scss

@@ -8,9 +8,14 @@
  *    styles/tools/_responsive.scss
  *
  *  Version:
- *    1.0.0 - 2018/06/06
+ *    1.1.0 - 2018/08/14
  */
 .p-home-page {
+  &__banner,
+  &__promo {
+    position: relative;
+    //@extend %t-dp--shadow-3d;
+  }
 
   &__promo {
     padding: 6em 0;
@@ -18,22 +23,6 @@
 
     &-video {
       background-image: url('./../images/patterns/florida.svg');
-      @extend %t-dp--shadow-3d;
-    }
-
-    &-programming {
-      background-image: url('./../images/patterns/rhythm-heaven.svg');
-      @extend %t-dp--shadow-3d;
-    }
-
-    &-platforms {
-      background-image: url('./../images/patterns/game-show.svg');
-      @extend %t-dp--shadow-3d;
-    }
-
-    &-work {
-      background-image: url('./../images/patterns/arcade.svg');
-      @extend %t-dp--shadow-3d;
     }
   }
 

public/styles/settings/z.scss

@@ -10,5 +10,6 @@ $s-z--background: -1;   //Background Element
 $s-z--navbar: 10;       //Navbar
 $s-z--menu: 15;         //Hamburger Menu
 $s-z--menu-button: 16;  //Button to toggle menu.
+$s-z--logo: 16;         //Logo (Goes over top of menu)
 $s-z--modal: 100;       //Modals
 $s-z--transition: 1;    //The Z-Index of an element in transition