demo_page/assets/sass/layout/_bg.scss

///
/// Dimension by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* BG */

	#bg {
		@include vendor('transform', 'scale(1.0)');
		-webkit-backface-visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 1;

		&:before, &:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		&:before {
			@include vendor('transition', 'background-color #{_duration(bg)} ease-in-out');
			@include vendor('transition-delay', '#{_duration(intro)}');
			background-image:		linear-gradient(to top, #{_palette(bg-overlay)}, #{_palette(bg-overlay)}),
									url('../../images/overlay.png');
			background-size:		auto,
									256px 256px;
			background-position:	center,
									center;
			background-repeat:		no-repeat,
									repeat;
			z-index: 2;
		}

		&:after {
			@include vendor('transform', 'scale(1.125)');
			@include vendor('transition', (
				'transform #{_duration(article)} ease-in-out',
				'filter #{_duration(article)} ease-in-out'
			));
			background-image:		url('../../images/bg.jpg');
			background-position:	center;
			background-size:		cover;
			background-repeat:		no-repeat;
			z-index: 1;
		}

		body.is-article-visible & {
			&:after {
				@include vendor('transform', 'scale(1.0825)');
				@include vendor('filter', 'blur(0.2rem)');
			}
		}

		body.is-preload & {
			&:before {
				background-color: _palette(bg-alt);
			}
		}
	}