CSS - Background image fixed during scroll

[JustAnABDL]

TEXT EDITED :

Okay so basically I modified the CSS code of a certain theme that I've seen on reddit and now it's looking like that :



And I want that when I scroll down the movie background image and this image



move in the point of view of the user, but it doesn't.
So I tried to firstly modify the code of the image above (named mask.png) and the problem is the height. It technically works with this for the mask.png but I have to specify a certain height and the height changes for each film, so I search a way that the height is the size of the size of the page when you scroll.


When I put 200% for example it looks like that on this film (so the correct height would be around 210% - 220%) but it changes for each film.
 



This is the code :

.layout-desktop .itemBackdrop:after {
  background: url("https://i.ibb.co/48fxbrV/mask.png");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 200%;
}

Thanks for responding, I tried what you said but it doesn't work unfortunately :C.
When I try 100vh it's too small and thanks for the typo, I didn't see that before.

[JustAnABDL]

Okay so, the problem here is the min-height, but when i change 100% to fit-content it still doesn't work, it doesn't cover all the page.
Why ? Please.

[Tim]

Can you try to use min-height: 100vh?

---

I dont actually understand the problem to be honest. What is it what you want to achieve and what is it that is not working with min-height: 100%?

[Tim]

@JustAnABDL You made a typo background-attachment: fixedl; should be background-attachment: fixed;.

[JustAnABDL]

Thanks for responding. I modified the post.
Okay and also to use a background image, I can use this code but the problem is that it modifies all the other pages:

.backdropImage {
display: none;
}

.backgroundContainer {
background-color: rgba(0, 0, 0, 0);
background-image: url('https://i.ytimg.com/vi/avCWDDox1nE/maxresdefault.jpg');
filter: blur(10px);
background-size: cover;
}

But do you know how I can modify this code to not see the image on individual films and series.
Thanks for your help :3

[Tim]

Which theme do you use? Because min-height 100% works for me. I dont see the artifacts when i scroll down on a movie page.

[Tim]

But do you know how I can modify this code to not see the image on individual films and series.

I thought you wanted to have this effect shown only on the individual movies and episodes?

[JustAnABDL]

Hello, so I didn't figure out how to do what I wanted (and also I don't know how to explain sorry I'm a bit dumb x)
but I found an amazing theme on reddit : https://www.reddit.com/r/jellyfin/commen...me_scyfin/
And I think that I'll be using it. It's so beautiful.

But thanks for your help anyway,
People like you who take their time to help others are amazing :3

Bye bye

[Tim]

You're very welcome!

[JashLathiya]

Can I get this Theme or CSS?