Can't get it just right, working on artist though

mopidy_iris/static/app.css

@@ -4220,18 +4220,19 @@ select {
   z-index: 3; }
 
 .parallax {
-  position: relative;
-  height: 40vh; }
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  max-height: 60vh; }
   .parallax__image {
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
     transition: all 0.5s ease-in-out;
-    position: absolute;
-    top: -10px;
-    left: -10px;
-    bottom: -10px;
-    right: -10px;
+    width: 100%;
+    height: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 50% 30%;
@@ -4248,6 +4249,9 @@ select {
     height: 100%;
     background-image: linear-gradient(rgba(24, 24, 24, 0), #181818);
     z-index: 1; }
+  .parallax:not(.parallax--boxed) .parallax__overlay {
+    transform: translateZ(-400px) scale(1.4);
+    transform-origin: top center; }
   .parallax--blur .parallax__image {
     -webkit-filter: blur(10px);
     filter: blur(10px); }
@@ -6335,12 +6339,10 @@ main header {
     content: '';
     clear: both;
     display: block; }
-  .light-theme .artist-view .intro .parallax__overlay {
-    display: none; }
   .artist-view .intro .liner {
     position: relative;
     z-index: 1;
-    padding: 0 40px 0; }
+    padding: 35vh 40px 0; }
     .artist-view .intro .liner h1 {
       padding-bottom: 25px;
       font-size: 5rem;
@@ -6352,6 +6354,11 @@ main header {
     .artist-view .intro .liner .sub-views {
       padding-top: 25px; }
 
+.artist-view .content-wrapper {
+  background: #181818; }
+  .light-theme .artist-view .content-wrapper {
+    background: #FFFFFF; }
+
 .artist-view .body.overview .albums {
   padding-top: 30px; }
 

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1545074268";
+	var build = "1545120744";
 	var version = "3.31.6";
 
 	// Construct the script tag

src/js/components/Parallax.js

@@ -56,6 +56,9 @@ export default class Parallax extends React.Component{
 		if (this.state.loaded){
 			class_name += " parallax--loaded";
 		}
+		if (this.props.boxed){
+			class_name += " parallax--boxed";
+		}
 
 		var style = {};
 		if (this.state.loaded && this.state.url){

src/js/views/Artist.js

@@ -307,7 +307,7 @@ class Artist extends React.Component{
 			<div className="view artist-view preserve-3d">
 				<div className="intro preserve-3d">
 
-					<Parallax image={image} />
+					<Parallax image={image} boxed />
 
 					<div className="liner">
 						<h1>{this.props.artist ? this.props.artist.name : null}</h1>

src/scss/components/_parallax.scss

@@ -1,16 +1,17 @@
 $parallax: 'parallax';
 
 .#{$parallax} {
-	position: relative;
-	height: 40vh;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 100%;
+	max-height: 60vh;
 
 	&__image {
 		@include animate(0.5s);
-		position: absolute;
-		top: -10px;
-		left: -10px;
-		bottom: -10px;
-		right: -10px;
+		width: 100%;
+		height: 100%;
 		background-repeat: no-repeat;
 		background-size: cover;
 		background-position: 50% 30%;
@@ -31,6 +32,15 @@ $parallax: 'parallax';
 		z-index: 1;
 	}
 
+	&:not(&--boxed) {
+		.#{$parallax} {
+			&__overlay {
+				transform: translateZ(-400px) scale(1.4);
+				transform-origin: top center;
+			}
+		}
+	}
+
 	&--blur {
 		.#{$parallax} {
 			&__image {

src/scss/views/_artist.scss

@@ -9,18 +9,10 @@
 		position: relative;
 		@include clearfix();
 
-		.parallax {
-			.light-theme & {
-				&__overlay {
-					display: none;
-				}
-			}
-		}
-
 		.liner {
 			position: relative;
 			z-index: 1;
-			padding: 0 40px 0;
+			padding: 35vh 40px 0;
 
 			h1 {
 				padding-bottom: 25px;
@@ -42,7 +34,14 @@
 				padding-top: 25px;
 			}
 		}
+	}
 
+	.content-wrapper {
+		background: colour(dark_grey);
+
+		.light-theme & {
+			background: colour(white);
+		}
 	}
 
 	.body {