Keeping image aspect ratios intact while using Scrolling Parallax jQuery plugin

Question

I am using the Scrolling Parallax jQuery plugin to scroll the "background" image (not actually a css background-image) on this site.

Is it possible to maintain the image aspect ratio, i.e. not squash the images, and still have it work in all modern browsers?

I tried setting bgHeight : 'auto' which sets the image css to height:auto, but this stops the scrolling effect working in Chrome and Safari.

I also tried setting bgWidth : 'auto' but then the image is narrower than the browser window.

Also open to other plugins or ways to implement this effect, i.e. having the background image scroll at a different rate to the page content, and also to show the entire image, but not scroll past it...

Thanks in advance for any help!

What if you put the image in body background & use background-size:cover; css-tricks.com/perfect-full-page-background-image — SVS

arttronics arttronics · Accepted Answer · 2012-06-21T21:42:11

Because the width is automatically set to be 100% of the viewport, stretching will occur unless you change that.

Use this:

$.scrollingParallax('img/clouds.png', {
    bgHeight : '250%',
    staticSpeed : .25,
    staticScrollLimit : false,
    bgWidth: 'auto'
});

The above can be seen in action here: jsFiddle

Since a non-stretched background image is always floating left, I whipped up some jQuery goodness so the image is centered in the viewport at all times, even during Window Resize Event. That said, the image will now scale up to the maximum image size or shrink while preserving Aspect Ratio in all browsers.

$(function() {

    // Specify your background image here.
    var bgMain = 'http://indigobrazilianportuguese.com/2012/wp-content/uploads/Home_bg1600.jpg';

    $.scrollingParallax(bgMain, {
        bgHeight : '200%',
        staticSpeed : 0.25,
        staticScrollLimit : false,
        // Important to set to 'auto' so Aspect Ratio for width is preserved because height defined above is fixed.
        bgWidth: 'auto'
    });

    // These two lines is for page load.
    // The variable will calculate CSS 'left' for the background image to center it in the viewport.
    // First, horizontal viewport size is checked via $(window).width()
    // Then, image width is determined by searching for image's unique filepath/filename.
    // Once the different is known, this value is then divided by 2 so that equal space is seen on left and right side of image which becomes the variable value.
    var bgMainHcenter = ( $(window).width() - $('body img[src="' + bgMain + '"]').width() ) /2 ;
    $('body img[src="' + bgMain + '"]').css('left', bgMainHcenter + 'px');

    // Just like above, it's repeated during Window Resize Event.
    $(window).resize(function() {
        bgMainHcenter = ( $(window).width() - $('body img[src="' + bgMain + '"]').width() ) /2 ;
        $('body img[src="' + bgMain + '"]').css('left', bgMainHcenter + 'px');
    });

});

See it in action here: jsFiddle

Keeping image aspect ratios intact while using Scrolling Parallax jQuery plugin

2 Answers