css - How does one make a html scrolling page

Question

So basically, this sounds similar to another question but hear me out; What I want is one photo to be stuck there, and that I can scroll in it, if you are having trouble understanding here's an example: www.starwars.com

If you see carefully, you can see that there is a space background anchored and elements (Videos and Images) that I can scroll.

Any sort of help will be appreciated.

Answer 1

What I think you're getting at is CSS background attachment.

Suppose you have a large background image... we'll call it background.webp for this example. You might put something like this in your CSS:

body {
  background-image: url("background.webp");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

This will set the image to be the background (background-image), lock it so it doesn't scroll with the content (background-attachment), center the image (background-position), prevent it from repeating (background-repeat), and resize it so it covers the whole viewport (background-size).