diff --git a/TODO.md b/TODO.md
index 599f2bb..dca06d2 100644
--- a/TODO.md
+++ b/TODO.md
@@ -7,6 +7,7 @@
 
 
 ## Schedule
+* ContentPage - change the background div to a named slot instead so can use whatever components i want inthere instaed.
 * styling
 * page transitions
 * images
diff --git a/components/BackgroundImageLoader.vue b/components/BackgroundImageLoader.vue
new file mode 100644
index 0000000..22f8674
--- /dev/null
+++ b/components/BackgroundImageLoader.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="background-image">
+  </div>
+</template>
+
+<script>
+import imageLoader from '~/mixins/imageLoader.js'
+
+export default {
+  mixins: [ imageLoader ],
+  props: {
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.background-image {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+</style>
diff --git a/components/ContentPage.vue b/components/ContentPage.vue
index bc3479c..44e83bf 100644
--- a/components/ContentPage.vue
+++ b/components/ContentPage.vue
@@ -6,6 +6,7 @@
         <slot></slot>
       </div>
     </section>
+    <!-- TODO CHANGE THE BACKGROUND DIV TO A NAMED SLOT -->
     <div class="background background-container">
       <div class="background background-loading"
            :style="loadingStyle"></div>