Repositioning Parallax Background

[CooKachoo]

Hello,

I’ve been working with this template and can’t seem to figure out how change the starting position of the header background image. I’ve gone through the CSS and set all background-position properties to ‘bottom’ yet the background remains positioned at the top.

I think that this might be happening because of the parallax animation code in main.js
Regardless, I have no idea how to change the background position and keep the animation.

			if (settings.parallax) {

				breakpoints.on('<=medium', function() {

					$window.off('scroll.strata_parallax');
					$header.css('background-position', '');

				});

				breakpoints.on('>medium', function() {

					$header.css('background-position', 'left bottom');

					$window.on('scroll.strata_parallax', function() {
						$header.css('background-position', 'left ' + (1 * (parseInt($window.scrollTop()) / settings.parallaxFactor)) + 'px');
					});

				});

				$window.on('load', function() {
					$window.triggerHandler('scroll');
				});

			}`

[PaulOB]

Are you sure its not just a css issue?

You are setting the background-size to 150% and the js animates the top position of the background anyway for the parrallax effect (which would over-write the bottom value). Even if you set bottom the js is over-writing it with an inline style.

Try just setting the #header to cover.

#header {background-size:auto, cover!important}

If that doesn’t help then you will need help with the JS from an expert (not me).