update: image moved from background-image to image element

components/GalleryImageViewer.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="image-viewer"
        :class="{ 'is-visible': isVisible }">
-    <div class="image-container"
+    <div class="viewer-background"
          :style="backgroundStyle">
     </div>
+    <div class="image-container">
+      <img class="image"
+           :src="imageUrl">
+    </div>
     <div class="close-viewer mobile-only"
          @click="$emit('close')">
       X
@@ -68,7 +72,7 @@ export default {
 
 <style lang="scss" scoped>
 .image-viewer {
-  background-color: blue;
+  background-color: #222;
 }
 
 .image-container {
@@ -77,6 +81,16 @@ export default {
   background-color: transparent;
 }
 
+.image {
+  width: auto;
+  height: auto;
+  max-height: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 @media (max-width: $bp__layout) {
   .close-viewer {
     position: absolute;
@@ -142,5 +156,17 @@ export default {
     bottom: 8px;
     background-position: top center;
   }
+
+  .viewer-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-size: 100% 100%;
+    background-position: center center;
+    filter: blur(100px);
+    opacity: .3;
+  }
 }
 </style>