Allow choosing background image in _config.yml

Author: potentialize

_config.yml

@@ -5,6 +5,8 @@ description:        "Jekyll version of the Massively theme by HTML5UP"
 locale:             en_US
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site
+background_image:   /images/bg.jpg
+# Tip: The color palette and other styles can be configured in /_sass/lib/_vars.scss
 
 defaults:
 - scope:

_sass/layout/_wrapper.scss

@@ -19,7 +19,7 @@
 			width: 100%;
 			height: 100%;
 			background-color:		_palette(wrapper-bg);
-			background-image:		url('../../images/overlay.png'),	linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),	url('../../images/bg.jpg');
+			background-image:		url('../../images/overlay.png'),	linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),	url($background_image);
 			background-size:		auto,								auto,														100% auto;
 			background-position:	center,								center,														top center;
 			background-repeat:		repeat,								no-repeat,													no-repeat;
@@ -61,4 +61,4 @@
 				background-size:	auto,								auto,														auto 175%;
 			}
 		}
-	}
+	}

assets/css/main.scss

@@ -2,6 +2,8 @@
 # Jekyll automatically transpiles this file; access via {{site.url}}/assets/css/main.css
 ---
 
+$background_image: '{{site.background_image}}';
+
 @import 'libs/vars';
 @import 'libs/functions';
 @import 'libs/mixins';

assets/css/noscript.scss

@@ -18,7 +18,7 @@
 
 	#wrapper {
 		background-color:		_palette(wrapper-bg);
-		background-image:		url('../../images/overlay.png'),	linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),	url('../../images/bg.jpg');
+		background-image:		url('../../images/overlay.png'),	linear-gradient(0deg, rgba(0,0,0,0.1), rgba(0,0,0,0.1)),	url('{{site.background_image}}');
 		background-size:		auto,								auto,														100% auto;
 		background-position:	center,								center,														top center;
 		background-repeat:		repeat,								no-repeat,													no-repeat;