In order to dynamically apply fullscreen background images in a WordPress site, I am utilizing Backstretch.js along with a custom field.
Everything is functioning properly for the body's background image. However, there seems to be an issue with another element on the page that has its background image set through CSS. This problem only occurs in Chrome.
Upon loading the page, both background images are displayed correctly. But as I scroll down, the CSS background disappears - sometimes entirely, and sometimes just sections of it vanish. Removing Backstretch resolves this issue, but ideally, I would like both backgrounds to remain fixed.
BACKSTRETCH
<?php $image = get_post_meta($post->ID, 'wpcf-background-image', TRUE); ?>
<?php if ( ! empty ( $image ) ) { ?>
<script>
jQuery.backstretch("<?php echo $image ?>");
</script>
<?php } ?>
CSS
.full-grey-cover {
overflow: hidden;
background-image: url(images/menu-bg-2.jpg) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
I currently have two pages set up using Backstretch for the background.
and
These pages seem to function properly in Firefox and Safari, but not in Chrome (Mac/Mavericks). This inconvenience arose because I needed to use Backstretch since the fixed background was not working well on IOS devices.
N.