i know this topic is discussed a lot and i know how to make images fill the entire browser size.
Still there is something i dont know how to do in the visual composer.
See this example here:
ONLY THE BROWSER HEIGHT (not the width). I noticed that the image resizes to a certain point and after that the images will not resize further. It feels like the image is fixed and the browser window is a mask.
Maybe someone out there knows the trick.
I am curious.
try something like 75vh.
EDIT: In looking at it again… I think you are asking something different.
Try positioning the image 0,0
style=“background-position: 0% 0%;”
and look into background-ratio.
@Revolution I am actually looking for a way to build this inside webflow without custom code.
Still thanks for your fast response.
The effect that you’re seeing there is called Parallax.
Theres a tutorial on how to achieve those kind of effect here:
Hello, dear Webflowers!
I know that I am not the first user who tried to create and use different types of “Parallax” effect in Webflow without custom code. After we got 3D transforms feature I found out the trick how to create such effects in easier way.
1) “Simple parallax”.
(I think almost everybody knows, but will repeat)
Create section (or div), set background image and make background settings: fixed
2) ** Parallax with background moving up on scroll"**
a) Create se…
Let me know if that helps.
@aaronocampo. Perfect answer. This is really helpful.
Thank you very much.
That seems a bit much, since all the custom code you would need is this
var parallaxeffect = $(window);
and then set the div you have your background image to
and the background-attachment to fixed.
And your done.
I thought I mentioned background ratio ?
Maybe not. I’m sick as a dog right now.
Barfing up all over the place… ekkk.
But the the due date on this darn project doesn’t care
It’ll be really helpful to see it implemented.
Thanks for your help to the community.
I love how you managed to sneak your way around not phrasing this as a question
I got good news for you boys, you can do it
without a single line of code.
Take a look here.
Paste the script in your webflow site or host it somewhere and implement it (Page: JSParallax on my [read-only]
Design away but leave your target div (e.g. parallax-wrapper) transparent. (Overlays are still A-ok). Also, your div needs height in order to make this work.
Navigate to the settings (gear symbol) and add two custom attributes to your target div:
data-parallax to the value:
data-image-src to the value:
How to get your image URL? Upload it to your asset manager and grab die url via inspector.
It’s really easy, right?
P.S.: If you want to take a look
You’ll get through this, deadlines aren’t the worst thing. Imagine having to do 1000 adjustments after giving your everything and hitting the deadline @Revolution
Great info and explanation!!
(the only thing that I would say is that I wouldn’t say “without any code” because at the end you’re using external code to make it work)
It now says “without having to code”
@Karl-Heinrich This is really helpful. Thanks a lot for sharing this.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.