Fullscreen Cover Image

[George_Konig (George)]

Hi Guys,

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: Designer - Personal Portfolio Template

Now shrink 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.

[Revolution]

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.

[George_Konig (George)]

Hi @Revolution I am actually looking for a way to build this inside webflow without custom code.
Still thanks for your fast response.

[aaronocampo]

The effect that you’re seeing there is called Parallax.

Theres a tutorial on how to achieve those kind of effect here:

Different Parallax effects possible with Webflow (no custom code required)

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 [image] 2) ** Parallax with background moving up on scroll"** a) Create sec…

Let me know if that helps.

Cheers,

[George_Konig (George)]

hi @aaronocampo. Perfect answer. This is really helpful.
Thank you very much.

[Karl-Heinrich (Tobias)]

Hi @George_Konig

That seems a bit much, since all the custom code you would need is this

var parallaxeffect = $(window);
    parallaxeffect.stellar({
        responsive: true,
        positionProperty: 'position',
        horizontalScrolling: false
    }); 

and then set the div you have your background image to <div data-stellar-background-ratio="0.5">
and the background-attachment to fixed.

And your done.

Best,
Karl-Heinrich

[Revolution]

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

[aaronocampo]

It’ll be really helpful to see it implemented.

Thanks for your help to the community.

[Karl-Heinrich (Tobias)]

Hahah @aaronocampo,
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.

Steps:
Paste the script in your webflow site or host it somewhere and implement it (Page: JSParallax on my [read-only]
(Webflow - sandbox))

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: scroll and data-image-src to the value: /path/to/image.jpg.

How to get your image URL? Upload it to your asset manager and grab die url via inspector. More details.

It’s really easy, right?

Best,
Karl-Heinrich

P.S.: If you want to take a look @George_Konig
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

[aaronocampo]

@Karl-Heinrich

Great info and explanation!!

Thanks!

(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)

[Karl-Heinrich (Tobias)]

@aaronocampo,

Agreed It now says “without having to code”

[George_Konig (George)]

@Karl-Heinrich This is really helpful. Thanks a lot for sharing this.