diff --git a/src/wp-content/themes/twentyseventeen/assets/js/global.js b/src/wp-content/themes/twentyseventeen/assets/js/global.js
index fa29a19b79..cb8a6ec92f 100644
--- a/src/wp-content/themes/twentyseventeen/assets/js/global.js
+++ b/src/wp-content/themes/twentyseventeen/assets/js/global.js
@@ -148,6 +148,34 @@
 		return 'http://www.w3.org/2000/svg' === ( 'undefined' !== typeof SVGRect && div.firstChild && div.firstChild.namespaceURI );
 	}
 
+	/**
+	 * Test if an iOS device.
+	*/
+	function checkiOS() {
+		return /iPad|iPhone|iPod/.test(navigator.userAgent) && ! window.MSStream;
+	}
+
+	/*
+	 * Test if background-attachment: fixed is supported.
+	 * @link http://stackoverflow.com/questions/14115080/detect-support-for-background-attachment-fixed
+	 */
+	function supportsFixedBackground() {
+		var el = document.createElement('div'),
+			isSupported;
+
+		try {
+			if ( ! ( 'backgroundAttachment' in el.style ) || checkiOS() ) {
+				return false;
+			}
+			el.style.backgroundAttachment = 'fixed';
+			isSupported = ( 'fixed' === el.style.backgroundAttachment );
+			return isSupported;
+		}
+		catch (e) {
+			return false;
+		}
+	}
+
 	// Fire on document ready.
 	$( document ).ready( function() {
 
@@ -184,6 +212,10 @@
 		if ( true === supportsInlineSVG() ) {
 			document.documentElement.className = document.documentElement.className.replace( /(\s*)no-svg(\s*)/, '$1svg$2' );
 		}
+
+		if ( true === supportsFixedBackground() ) {
+			document.documentElement.className += ' background-fixed';
+		}
 	});
 
 	// If navigation menu is present on page, adjust it on scroll and screen resize.
diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css
index a109c28f91..70913119b8 100644
--- a/src/wp-content/themes/twentyseventeen/style.css
+++ b/src/wp-content/themes/twentyseventeen/style.css
@@ -3603,6 +3603,11 @@ object {
 		max-height: 1200px;
 	}
 
+	/* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */
+	.background-fixed .panel-image {
+		background-attachment: fixed;
+	}
+
 	.page-two-column .panel-content .entry-header {
 		float: left;
 		width: 36%;
@@ -3993,13 +3998,6 @@ object {
 	}
 }
 
-@media screen and ( min-width: 85.45em ) {
-
-	.panel-image {
-		background-attachment: fixed;
-	}
-}
-
 @media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {
 
 	.admin-bar .site-navigation-fixed.navigation-top,