diff --git a/firebase.md b/firebase.md
index fc64a56..b297403 100644
--- a/firebase.md
+++ b/firebase.md
@@ -898,6 +898,8 @@ document setting a default cols (check this with triangle)
 
 <!-- TODO Screenshot of firebase tutorial login page -->
 
+<https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/views/forms/LoginForm.vue>
+
 You can control how items are rendered based on the viewport width. For example, you can have a page appear across 2 columns on desktop, but display a single column on mobile : <http://localhost:8080/triangle>
 
 One way is to use the the viewport cols props for `<v-col>`:
@@ -917,10 +919,25 @@ You can find all props for the dynamic cols in <https://vuetifyjs.com/en/compone
 
 If you set a row to use more than 12 columns, it will overfill on to the next line.
 
-<!-- TODO Document using align-sm-end for responsive content layouts -->
-
 <!-- ? should this be merged with the previous section on mobile layouts  -->
 
+Using the cards to create dynamic rows filling the space in each column, you can go even further and control how this should render on different viewports.
+
+For example, if we wanted to center content on a mobile, but have it align to the right on larger screens we can do the following:
+
+```html
+<div
+  class="d-flex flex-column align-sm-end align-center justify-center"
+  :class="alignOnViewport"
+>
+```
+
+Here we are using `align-center`. This will set the content to center itself by default. We can then use `align-sm-end` to align the content to the right on anything sm and above. Combinations of these can be used to create dynamic and fluid layouts for all devices.
+
+You can also use dynamically created classes to apply css to the content depending on the viewport.
+
+<!-- ! create the trilium note link here -->
+
 ## CSS Spacing
 
 <https://vuetifyjs.com/en/styles/spacing/>
@@ -1021,3 +1038,137 @@ The x and y set the coordinate system to use for the top left corner of the view
 Take for example `viewBox="-50 -50 100 100"` - this means the top left corner has coordinates -50,-50, so the bottom right corner has coordinates 50,50. Drawing a circle centered around 0,0 with radius 50 it will fill the screen.
 
 Setting a viewbox allows you to set the box that the svg element should draw in. This will allow you to then control the width and height to scale the element properly.
+
+## Triangle banners
+
+### Method 1 - position: absolute
+
+See <https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/views/Triangle.vue> for an example.
+
+You should create a triangle banner css class:
+
+```scss
+.newtriangle {
+  width: 105vw;
+  height: 50vh;
+  background-image: radial-gradient(
+    circle farthest-corner at 7.5% 54.1%,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(39, 0, 89, 1) 74.9%
+  );
+  -webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+}
+```
+
+Then you should create a `<v-row>` with this class. This row should also set `position: absolute; z-index: 1;` in the style (or add this to the triangle class).
+
+```html
+<v-row class="d-flex newtriangle" style="position: absolute; z-index: 1;">
+  <v-col
+    class="d-flex align-center pt-0 ml-8"
+    style="position: relative; z-index: 10;"
+  >
+    <v-card flat color="rgb(0, 0, 0, 0)">
+      <h1 class="display" style="position: relative;">
+        Welcome to Savvy Firebox Tutorial
+      </h1>
+      <v-btn
+        x-large
+        color="primary"
+        style="position: relative; z-index: 10;"
+        class="lighten-1"
+        >Click Here</v-btn
+      >
+    </v-card>
+  </v-col>
+</v-row>
+```
+
+Because the element has been set to position absolute, any content after this without absolute positioning will be on top of this element. You should create a blank row with `position: relative;` with a height matching the triangle banner above it. This will create blank space on top of the banner.
+
+```html
+<v-row class="d-flex" style="position: relative; height: 50vh;"> </v-row>
+```
+
+Any other content then be placed after this like normal.
+
+### Method 2 - Without position: absolute
+
+See <https://git.panaetius.co.uk/web-development/savvy-firebase/src/branch/base-template/src/views/Backgrounds.vue> for an example.
+
+Add the css class for the banner:
+
+```css
+.newtriangle {
+  width: 105vw;
+  height: 50vh;
+  background-image: radial-gradient(
+    circle farthest-corner at 7.5% 54.1%,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(39, 0, 89, 1) 74.9%
+  );
+  -webkit-clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+  clip-path: polygon(0 0, 100% 35%, 100% 65%, 0% 100%);
+}
+```
+
+Apply this class to a `<v-content>` and add any content to go inside it:
+
+```html
+<v-container fluid class="newtriangle">
+  <v-row class="fill-height d-flex align-center">
+    <v-col class="">
+      <h1 class="display-2 white--text">
+        CSS polygon background with clip-path.
+      </h1>
+    </v-col>
+  </v-row>
+</v-container>
+```
+
+## Fullscreen backgrounds
+
+You can use svg images as a fullsize background. These images can be obtained from envano web templates - use Pixelmator Pro and its extraction tools to extract the svg elements, upscale and export for web.
+
+Create a `<v-img>` with the src as the svg image.
+
+```html
+<v-img
+  src="../assets/images/background.svg"
+  :height="this.currentHeight - 64"
+  width="auto"
+  contain="false"
+  position="bottom 0px right 0px"
+></v-img>
+```
+
+Any content to go in the page should go inside the `<v-img>` tags.
+
+The width should be auto - it will be set by the height.
+
+The prop `contain` should be used to ensure the image fits the full height properly and isn't cropped.
+
+To align the image in the bottom right, set the position prop:
+
+```html
+position="bottom 0px right 0px"
+```
+
+If you are using a appbar, you should dynamically get the viewport height, and substract the height of the appbar. The default height is `64px` - use the documentation to find the heights if using dense or extended props.
+
+You should add a computed property that returns the current viewport height:
+
+```javascript
+computed: {
+  currentHeight() {
+    return window.innerHeight
+  }
+}
+```
+
+Then, in the height of the `<v-img>` you should set a dynamic prop that sets the height of the image to this computed property minus the height of the appbar.
+
+```html
+:height="this.currentHeight - 64"
+```
diff --git a/src/assets/images/newbackground.png b/src/assets/images/newbackground.png
new file mode 100644
index 0000000..9a337e0
Binary files /dev/null and b/src/assets/images/newbackground.png differ
diff --git a/src/components/LoginFull.vue b/src/components/LoginFull.vue
index 1defc6c..112e1e4 100644
--- a/src/components/LoginFull.vue
+++ b/src/components/LoginFull.vue
@@ -1,7 +1,7 @@
 <template>
   <video-background
     :src="video"
-    style=" height: 100vh;"
+    style="height: 100vh;"
     overlay="linear-gradient(to right, #05193799, #10183d90, #1e164090, #2b114290, #39094190)"
   >
   <LoginForm class=""></LoginForm>
diff --git a/src/views/Playground.vue b/src/views/Playground.vue
index e34f5e3..f27da8b 100644
--- a/src/views/Playground.vue
+++ b/src/views/Playground.vue
@@ -1,18 +1,19 @@
 <template>
   <div>
-    <v-container fluid fill-height class="mr-0 pr-0 mt-0 pt-0">
-      <v-img
-        src="../assets/images/background.svg"
-        height="100vh"
+    <v-container fluid class="ma-0 pa-0 full-screen d-flex">
+      <img
+        src="../assets/images/newbackground.png"
         width="auto"
-        contain="false"
-        position="bottom 0px right 0px"
-      ></v-img>
-    </v-container>
-    <v-container>
-      <div style="position: relative; z-index: 1">
+        style=""
+        class="d-flex align-end ma-0 pa-0 justify-end new-background-image"
+      />
+      <v-container
+        fill-height
+        class="d-flex align-center"
+        style="position: relative; z-index: 10;"
+      >
         <v-row>
-          <v-col>
+          <v-col class="d-flex justify-center">
             <h1 class="display-2">Playground</h1>
           </v-col>
         </v-row>
@@ -23,19 +24,83 @@
         </v-row>
         <v-row>
           <v-col>
-            <h1 class="display-2">Playground</h1>
+            <h1 class="display-2">{{ viewportHeight - 64 }}</h1>
+          </v-col>
+          <v-col>
+            <h1 class="display-2">{{ viewportWidth }}</h1>
+          </v-col>
+          <v-col>
+            <h1 class="display-2">{{ backgroundWidth }}</h1>
           </v-col>
         </v-row>
-        <v-row>
-          <v-col> </v-col>
-        </v-row>
-      </div>
+      </v-container>
     </v-container>
   </div>
 </template>
 
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      viewportHeight: window.innerHeight,
+      viewportWidth: window.innerWidth,
+      backgroundWidth: ""
+    };
+  },
+  created() {
+    window.addEventListener("resize", this.updateHeight);
+    window.addEventListener("resize", this.updateWidth);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.updateHeight);
+    window.addEventListener("resize", this.updateWidth);
+  },
+  mounted() {
+    this.getBackgroundWidth();
+  },
+  methods: {
+    updateHeight() {
+      this.viewportHeight = window.innerHeight;
+    },
+    updateWidth() {
+      this.viewportWidth = window.innerWidth;
+    },
+    getBackgroundWidth() {
+      var background = document.querySelector("#backgroundsvg");
+      this.backgroundWidth = background.clientWidth;
+    }
+  }
+};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.full-screen {
+  height: calc(100vh - 64px);
+}
+
+.image-wrapper {
+  overflow: hidden;
+}
+
+img.new-background-image {
+  max-height: calc(100vh - 64px);
+  position: absolute;
+  height: 100%;
+  max-width: 1115px;
+  right: 0;
+  // left: 500px;
+}
+
+.background-image {
+  position: absolute;
+  height: calc(100vh - 64px);
+  // width: 100%;
+  max-width: 1115px;
+  right: 0;
+  z-index: 1;
+  border-style: dashed;
+  object-fit: cover;
+  object-position: right top;
+  overflow: hidden;
+}
+</style>
diff --git a/temp.md b/temp.md
new file mode 100644
index 0000000..0649665
--- /dev/null
+++ b/temp.md
@@ -0,0 +1,129 @@
+# Temp notes
+
+## React to height change
+
+To create content based on viewport height change you should use an event listener: `window.addEventListener`.
+
+A list of all events you can listen for is here: <https://developer.mozilla.org/en-US/docs/Web/Events>
+
+The current height can be obtained from `window.innerHeight`.
+
+You should add `created` and `destroyed` to the script, and create a method to do something on the trigger:
+
+```javascript
+export default {
+  data() {
+    return {
+      viewportHeight: window.innerHeight
+    };
+  },
+  created() {
+    window.addEventListener("resize", this.updateHeight);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.updateHeight);
+  },
+  methods: {
+    updateHeight() {
+      this.viewportHeight = window.innerHeight;
+    }
+  }
+};
+```
+
+This can be useful if you need to pass the current height to a prop for an image component that you might want to fill the page:
+
+```html
+<v-img
+  src="../assets/images/newbackground.png"
+  :height="this.viewportHeight - 64"
+  width="auto"
+  contain
+  position="bottom 0px right 0px"
+  class="ma-0 pa-0"
+  id="backgroundsvg"
+></v-img>
+```
+
+You can also get the height in the css. This way you can have an image set its own width or height as css parameters.
+
+```css
+.full-screen {
+  height: calc(100vh - 64px);
+}
+```
+
+You might also want to add browser compatibility options:
+
+Opera:
+`height: -o-calc(100% - 65px);`
+
+Google/Safari:
+`height: -webkit-calc(100% - 65px);`
+
+## Using `<v-content>` to fill the page
+
+`fill-height` is useful for child components if you want them to fill to the height of the parent.
+
+To make a fullscreen element use fluid with 0 margins, and set the height to 100vh. Then any children `<v-component>` can use the `fill-height` prop.
+
+## v-for for n times repetition
+
+You can repeat things n times using a `v-for`:
+
+```html
+<v-container v-for="index in 10" :key="index"></v-container>
+```
+
+Use `<v-container fill-height class="d-flex justify-center align-content-center">`
+to get content like - screenshot of central content with pipe background
+
+-webkit-background-size: cover;
+-moz-background-size: cover;
+-o-background-size: cover;
+background-size: cover;
+
+## Images as backgrounds
+
+You can use `background-size: cover;` in the css to dynamically have a background image adjust to the viewport.
+<https://www.webfx.com/blog/web-design/responsive-background-image/>
+
+Demo: <https://www.webfx.com/blog/images/assets/cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html>
+
+You can use aditional controls to set how the image should scale itself:
+<https://css-tricks.com/perfect-full-page-background-image/>
+
+Cropping images with `object-fit: cover;`
+<https://alligator.io/css/cropping-images-object-fit/>
+
+## Images that autoscale (zoom)
+
+To set an image to auto scale (zoom style)
+
+Use `max-width` to the value you want the image to be
+Use `width: 100%;`
+Use `height: auto;`
+Use `max-height` to the value you want the image to be
+
+## To Do
+
+Organise these notes!
+
+Get image cropping from more than one direction
+
+Document all up and move into firebase.md
+
+Do stripe menu
+
+Do waves/headers with backgrounds
+Do a fullscreen blob landing page
+Do Tailwind layout (moveable side content)
+Do Liquidlight (using big headers)
+
+Do buttons: <https://www.gatsbyjs.org>
+
+
+
+Use media query to unset the right position when the breakpoint is met (find the breakpoint in vuetify)
+
+Navbar gets slightly smaller on smaller breakpoints - can we dynamically set the hight on this?