How to make the entire page background image scroll?

Support
#1

Hi,

I’d like to have a parallax effect on the background of an entire page, so the background image that I set for the page will scroll smoothly (behind ALL X-sections on the page). It should move at a different (slower) speed than the foreground items, and I’m hoping to disable it on mobile as I’ve heard there are issues with parallax + phones.

As the background is for the page and I only find parallax settings per section, I can’t get the page background to move. Is there a simple CSS or JS script that can do this?

Edit: Site is at http://www.hopfentwista.de, I set up the “coming soon” page to have the background image I want to scroll.

Thanks,
David

#2

Hi David,

Thank you for writing in, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here. You can use the CSS and JS code that the Guy’s uses here. On his CSS code add the three lines below to smooth the scrolling.

background-size: cover;
transition: 0s linear;
transition-property: background-position;

On his JS code replace all the instance of $ sign with word jQuery

Only add this on the page CSS/JS, not on the Theme Options CSS/JS unless you want this background sitewide.

Hope it helps,
Cheers!

#3

Thanks a lot - I got it to work! I had to change a few things because I could not get the background image to show up under .body (very strange… maybe something else was overriding it in the code). Had to use .page, here is the CSS / JS.

I also wanted to use the overall background color set in the theme (a light gray), but if I made .site have a transparent background then a second version of the background image popped up. (I am guessing .page is somehow used twice as a container?)

CSS:
.site {

}
.page {
background-image: url(‘http://www.hopfentwista.de/wp-content/uploads/2017/08/hopfen-dolde-glas.png’);
/* background-repeat: repeat-y;*/
background-position: 50% 0;
background-size: contain;
transition: 0s linear;
transition-property: background-position;
}

JS:
jQuery(window).scroll(function () {
jQuery(".page").css(“background-position”,"50% " + (jQuery(this).scrollTop() / 2) + “px”);
});

#4

Hello There,

Thanks for updating in!

.site is inside the body element which has the class selector .page. You can force the .site by using this:

.page .site {
   // your styles
}

Hope this helps.

#5

Works perfectly now, thanks very much!

#6

Glad we could help.

Cheers!