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
