Scrolling over background picture


#1

Probably an easy answer for most but I have searched and can’t find anything (i’m sure there’s a term for it, I just don’t know it).

How do you set up the effect where the background picture will change as the blocs are scrolling over the picture - but the picture stays static on the page and doesn’t scroll itself.

http://blocstemplates.com/demo/producer/s/

About half-way down the page the background picture stays in place while the blocs scroll past it - but it’s not the background picture for the entire page. I’ve seen pages where the background picture will change too as the bloc scrolls past.

Thanks - haven’t designed a webpage in about 15 years so I’m way out of touch on the technology.


#2

You just need to add the image to the background and enable parallax for it. Not at my Mac or I would have pasted an image, sorry.


#3

Thanks.

When you have parallax checked for a background image, what controls when it changes? Does a background stay locked until you scroll to a bloc that has a different background, then it changes?


#4

Yes, but if you need the same image without change. Try a single bloc, but use the bricks to add further content. Otherwise each bloc will have its own image.

It really depends on what you need to achieve.

The image is static, so when you scroll the brics move over the image. The image will simply stop at the bottom if the brics could scroll past it.

Hope that makes sense?


#5

I think I have it down mostly, but can’t figure out how to better control how the background image resizes. I have “full” checked would expect the image to go as wide as the window, which it does, but it actually cuts off part of the all sides of the image

This is the original pic I’m using - http://www.scottnelsen.com/2018/mainpic_1000.jpg

but if you look at the site, you’ll see that when it fills the background, top/bottom/left/right go outside of the viewable area of the background - like it’s filling it too much (sorry if that’s not a very good explanation). And when the window is resized, often the left side of the image - me - will get pushed out of the viewable area.

BTW, it’s not until you take the browser window to almost full screen that you get to see the outer edges of the picture.

http://scottnelsen.com/2018/index.html

it’s the same with all the pics - like the fill setting is zooming in too far and the top/bottom/sides of the images aren’t visible until you increase the size of the browser window almost full screen.

I would think that “fill” means to push resize the image as needed to the edge of the browser, not push part of the image past that. make sense?

I just can’t see there are any more controls over how the background image behaves other than the style settings.


#6

Oh, and does anybody know why 2 of my 5 background images are missing? I have 5 images, all with the same parallax setting, they appear fine in the editor and in preview mode. But after exporting and uploading to my server, only 3 of the 5 images display. Is this a limitation of the trial version?


#7

There are no limitation on the trial version, so it should work. Might be worth clearing the cache and trying again, also a variety of browsers in case it is a browser issue.