Issue 350 (#416)

* Change fixed cover background

* add pseudo-element to overlay styles

Author: jamesros161

src/includes/customizer/class-boldgrid-framework-customizer-background.php

@@ -275,6 +275,28 @@ public function create_background_styles() {
 					'background-repeat: no-repeat;' .
 					'background-attachment: fixed;' .
 				'}';
+			} elseif ( 'fixed' === $bg_attach && 'cover' === $bg_size ) {
+				// This sets the background to a pseudo element to work with iOS.
+				$css = 'body.custom-background::before {' .
+					'content: "";' .
+					'top: 0;' .
+					'left: 0;' .
+					'position: fixed;' .
+					'background-size: cover;' .
+					'width: 100%;' .
+					'height: 100%;' .
+					'z-index: -1;' .
+					'background-position: center top;';
+				if ( $bg_image ) {
+					$css .= 'background-image: url("' . esc_attr( $bg_image ) . '");';
+				}
+
+				if ( $bg_repeat ) {
+					$css .= 'background-repeat: ' . esc_attr( $bg_repeat ) . ';';
+				}
+
+				$css .= '}';
+
 			} elseif ( 'fixed' === $bg_attach ) {
 				$css = 'body.custom-background {' .
 					'background-attachment: fixed;';
@@ -354,8 +376,8 @@ public function create_overlay_css( $image ) {
 			$color_obj->alpha = $alpha;
 			$new_color        = esc_attr( $color_obj->toCSS( 'rgba' ) );
 
-			$rule  = "@supports(background-blend-mode: $type) { body.custom-background, body.custom-background > [id^=\"jarallax-container\"] > div { background-color: $new_color !important; background-blend-mode: $type; } }";
-			$rule .= "@supports not (background-blend-mode: $type) { body.custom-background, body.custom-background > [id^=\"jarallax-container\"] > div { background-color: $color !important; opacity: $alpha; } }";
+			$rule  = "@supports(background-blend-mode: $type) { body.custom-background::before, body.custom-background, body.custom-background > [id^=\"jarallax-container\"] > div { background-color: $new_color !important; background-blend-mode: $type; } }";
+			$rule .= "@supports not (background-blend-mode: $type) { body.custom-background::before, body.custom-background, body.custom-background > [id^=\"jarallax-container\"] > div { background-color: $color !important; opacity: $alpha; } }";
 		}
 
 		return $rule;