Streaming live at 10am (PST)

Stop the scroll


#1

Iam having a tough time figuring what I am doing wrong. please click on the Arch Photography page and can you guys tell me how to make the back ground rooks image NOT scroll.


Here is my public share link: https://preview.webflow.com/preview/pixelcell-186afcb91866b17-f48477153dd7b?preview=61eb2d3282653fb32e9e4dec2c3a9488


#2

Any help with this??


#3

Hi,

Looks like you found it? Setting looks correct to me. See attached screen for you background settings. Currently set to "fixed" which keeps it from scrolling. Let me know if you were trying to do something different.


#4

Usually that works. But if you apply it to the body, it doesnt stay. it scrolls down into the tiles.


#5

I would like someone to explain how they would build that page just the way I have it but without the scrolling background pic of the rocks.


#6

Ive tried using 100% and VH and I cant seem to figure it out. Maybe the mods see this.


#7

overflow to scroll was the trick!


#8

ok. Fix the scrolling part but now that broke my interactions. can anyone look at it and see what the heck went wrong. look at the ARCH PHOTOGRAPHY. Notice my sliding pics dont all slide into view? If I uncheck overflow back to "visible on the body.. it fixes it but then the background scrolls again.

https://preview.webflow.com/preview/pixelcell-186afcb91866b17-f48477153dd7b?preview=61eb2d3282653fb32e9e4dec2c3a9488


#9

and I just noticed even with the overflow set to SCROLL.... it does not effect the real web page opened in a browser.


#10

well... ill stop trying different methods until one of the experts gives a better hint on this. remember that all I am seekng is a Static Background and have the pics scroll up and down with the sliding effect.


#11

Hi there, just on my phone so can't see the preview but it seems to me that whatever in in the body is affected by the Body styling so....
1. Select the body, add 2 divvs, call the first Background then style 100vw 10 VH position fixed, add the b/g image to it.
2. Select the second div, name it Body Content or whatever suits, ser 100vw height auto, add all the existing content into this div.
Hopefully by separating the BG from the contents everything should work as desired.
Good luck.


#12

Yeah that should be 100 VH for the BG, stupid thumbs!


#13

ideasman.... ill give it a shot right now!


#14

when you say add the b/g image. do you mean open the menu and add a IMAGE button or actually go into the div and scroll down to the b/g slot and add it there?


#15

son of a gun! that did it! a million thxs!


#16

Depends how you want the image to behave responsively. As a BG image Webflow won't currently serve up different image sizes for tablet, mobile views (apparently this is coming). I usually add 4 BG images - just press the BG image icon 4 times - and load up your 4 compressed images, turning 3 View off for each breakpoint. This gives me the advantage of staying each breakpoint separately, loading different shaped images to suit the format.
If you want to drag an Image into the div upload a full size image, Webflow will create different sizes and automatically serve up the right size when published. I usual give the image a BG class of BG Image, set 100 % in image settings. Something like this anyway, just play around in image settings to get the breakpoints to work.


#17

OK, "styling each breakpoint' that was autocorrect not thumbs


#18

ahh I see! good info. One thing that i had to do thought from your instructions, I had to give the 1st div that holds my b/g image a Z of -1. Otherwise the 2nd div with content wouldnt show up. Is that normal?


#19

Absolutely sorry I missed it, as long as the behaviour is correc and the second div works as you want it to. Good luck!


#20

Yup... its finally working! Thanks again! I deleted the z -1 and its working fine aswell. Odd ... the first time i did it, it ddnt want to show the b/g. But its all good now.