Background Image 'Jumps' on when viewing on phone – Sixteen Nine

[KathleenCD]

When I view the website on my Iphone (vertical view) the background image appears to jump and shift when scrolling down. The doesn't happen on desktop, Ipad or horizontal phone view.

Any suggestions how I might fix this?

Thanks

http://vanterresearch.com

[Badlywired]

It could be related to the javascript library 'backstretch' that is used to display the background image.

Frankly that isn't needed for your site and could be removed and replaced with standard CSS

find the 'enqueue' with 'backstretch in them and commend them out

body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

will work with most browsers & versions where you have the background in your theme images file as bg.jpg or whather you want

---

My techy blog WordPress and stuff badlywired.com

[KathleenCD]

Is this the section of code you mean? If so can you tell me how to correctly comment it out?

//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'sixteen_nine_enqueue_scripts' );
function sixteen_nine_enqueue_scripts() {

wp_enqueue_script( 'sixteen-nine-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

$image = get_option( 'sixteen-nine-backstretch-image', sprintf( '%s/images/bg.jpg', get_stylesheet_directory_uri() ) );

//* Load scripts only if custom backstretch image is being used
if ( ! empty( $image ) ) {

wp_enqueue_script( 'sixteen-nine-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script( 'sixteen-nine-backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'sixteen-nine-backstretch' ), '1.0.0' );

wp_localize_script( 'sixteen-nine-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );

[KathleenCD]

yikes! Not sure what I've done. I'm getting the following error now. I've copied and pasted form a clean version but it didn't solve the problem. How do I fix?

Parse error: syntax error, unexpected '*' in /home/vresearch/public_html/wp-content/themes/sixteen-nine-pro/functions.php on line 35

Tks.

[KathleenCD]

Whew! corrected the error. Still need a little more instruction on how to:

'find the ‘enqueue’ with ‘backstretch in them and commend them out' - I've pasted the relevant code above

Since I've already crashed my site once I'm obviously doing something wrong. Your help would be very much appreciated.

[KathleenCD]

Still haven't solved the problem of jumping script - I need help with the instructions provided previously to "find the ‘enqueue’ with ‘backstretch in them and commend them out"

Here's the code... what do I do?

//* Enqueue Backstretch script and prepare images for loading
add_action( ‘wp_enqueue_scripts’, ‘sixteen_nine_enqueue_scripts’ );
function sixteen_nine_enqueue_scripts() {

wp_enqueue_script( ‘sixteen-nine-responsive-menu’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/responsive-menu.js’, array( ‘jquery’ ), ‘1.0.0’ );

$image = get_option( ‘sixteen-nine-backstretch-image’, sprintf( ‘%s/images/bg.jpg’, get_stylesheet_directory_uri() ) );

//* Load scripts only if custom backstretch image is being used
if ( ! empty( $image ) ) {

wp_enqueue_script( ‘sixteen-nine-backstretch’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/backstretch.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_script( ‘sixteen-nine-backstretch-set’, get_bloginfo(‘stylesheet_directory’).’/js/backstretch-set.js’ , array( ‘jquery’, ‘sixteen-nine-backstretch’ ), ‘1.0.0’ );

wp_localize_script( ‘sixteen-nine-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => str_replace( ‘http:’, ”, $image ) ) );

[KathleenCD]

Still not able to resolve this. Would really appreciate some guidance.

Thanks
Kathy

[kilerb]

Ever figure this out? I'm trying to avoid this too in the 411 theme... Is it possible to have backstretch active on desktop browsers but css a different background in on mobile versions only that isn't backstretch so it doesn't jump when you scroll?

Thanks!

[Author]

Posts