Create responsive static background (no scrolling)

[Euclois]

Hi,
Trying to make a really simple website, I’ve got experience with design, but not webdesign.

I want to build a home page that is exactly the size of the screen, no scrolling at all, not even a pixel, static and fixed and also no zooming possible (like the fvckrender example below).

The background is either a video loop or image.

The background element must automatically resize with the window size, and crop it on the sides/top if necessary.

Then I want a new layer above the background that is basically text with info, that is responsive with screen sizes as well.

Navbar must have transparent background and be over the background, not above it.

I have two examples of what i want here:
https://www.fvckrenderverse.com/
https://sferic.xyz/

You can see that when you shrink the screen size, the video is cropped, and text sizes shrink and there is no scrolling whatsoever.

I’ve been around this for +7 hours, mostly learning, following tutorials, reading forums, and I don’t reach any solution. I’ve tried multiple options, like placing image under Body, under a section, setting it to 100vh and vw, but then the image stretches in a weird way instead of cropping, i’ve tried the overflow options. I’ve been going back and forward with menial solutions without any luck. I’ve given up on using video because it made it even harder, so I’m first trying out with a still image.

It would be awesome if you gave me some directions! Thanks

---

[Stan (justAnotherDeveloper)]

hi @Euclois and welcome on board. As it is very simple to achieve this design I have created for you one way how to. You can study and recreate.

READ-ONLY

LIVE PREVIEW

[Euclois]

Hi @Stan
I was able to do what I was trying to this morning with more patience, but with an image not video. Thanks for the example, I’ve taken some notes already! You did it in a different way than me so I have a few questions. I kind of replicated your way, but first, I use sections, while you used a div-block right away, are they interchangeable? When I put the background-video block, it stays in the background (right under body in the tree), but when I try clicking on content that is above the video, I can’t as if the video was on top of content (but I can see the content).

I’m still working on the page, right now my problems are making all that white text responsive, and scrollable just inside the div-block (not touching the edges of the screen). I was thinking about organizing the 3 columns of text in a grid, and when you shrink the screen size, then the columns would stack together.

https://preview.webflow.com/preview/lpl-d7aa66?utm_medium=preview_link&utm_source=designer&utm_content=lpl-d7aa66&preview=23d6a0b90cbc35674d0d0825ccf3a62a&workflow=preview

[Stan (justAnotherDeveloper)]

@Euclois

I use sections, while you used a div-block right away, are they interchangeable?

yes, but I prefer use <div> and assign them appropriate tag via settings

@Euclois

when I try clicking on content that is above the video, I can’t as if the video was on top of content

I do not understand as I’m able to click on links and links that are active works for me in preview mode.

@Euclois

and scrollable

you can set fixed height on <div> that contain text let say 200px or 20vh and se overflow: scroll but this is not good practice for UX. But you can try it

[Euclois]

Thanks! I’ll get around the background video.

But about the scrolling

you can set fixed height on <div> that contain text let say 200px or 20vh and se overflow: scroll but this is not good practice for UX. But you can try it > Blockquote

Why is it a bad practice?
My intention is to have no side-scrollbar, with a static background like we’ve seen.
And then I want those text columns, that are longer than the screen height, to be scrollable inside the div-block, very close to the edges of the screen, like 20px, and as text scrolls, it slowly fades away in the edges in like a 15px transition.

This was my diagram for the website i’m trying to build, see those grey dashed zones? thats when the text should start fading away when content is being scrolled.

Thanks for the help! Sorry for the bother! But I’m really trying to learn webflow, as a designer, this is a great tool for organizing my projects and launch quick beautiful ideas.

[Euclois]

And apparently, the Grid solution for the columns isn’t working well. Might just have to set it up differently for tablet/mobile.

And trying the scroll solution you gave, I get the classic scroll bar on the side of each column, which is a no-no. I’m looking for the smooth clean scroll. like the one on fvckrenderverse.com when you click the “what is fvckrenderverse”

[Stan (justAnotherDeveloper)]

hi @Euclois as there were many things to change to make it work I have made short video. Please download it as I will delete it tomorrow.

here is starting code for clamp()

<style>
.heading-2{
font-size: clamp(1rem, 1rem + 1vw, 2rem);
}
.paragraph-2{
font-size: clamp(1rem, .5rem + 1vw, 2rem);
}
</style>

Linearly Scale font-size with CSS clamp() Based on the Viewport | CSS-Tricks

website you referring use standard scroll as you can see on screenshot. Using overflow can be used but I have strong opinion on when to use it

[Euclois]

Thank you so much Stan! That was really cool of your part to make that video. I have downloaded it already! I’m going to watch it now with attention and will give some feedback later.

I’m redoing the website from scratch again and trying to structure it with your suggestions.