CSS - Background image fixed during scroll

CSS - Background image fixed during scroll - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: General Questions (https://forum.jellyfin.org/f-general-questions)
+--- Thread: CSS - Background image fixed during scroll (/t-css-background-image-fixed-during-scroll)

CSS - Background image fixed during scroll - JustAnABDL - 2024-02-23

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 :

[Image: 1.png]

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

[Image: mask.png]

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.

[Image: 3.png]

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.

RE: CSS - Background image fixed during scroll - JustAnABDL - 2024-02-23

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.

RE: CSS - Background image fixed during scroll - Tim - 2024-02-23

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%?

RE: CSS - Background image fixed during scroll - Tim - 2024-02-23

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

RE: CSS - Background image fixed during scroll - JustAnABDL - 2024-02-23

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

RE: CSS - Background image fixed during scroll - Tim - 2024-02-23

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.

[Image: 28O2dM3.png]

RE: CSS - Background image fixed during scroll - Tim - 2024-02-23

Quote: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?

RE: CSS - Background image fixed during scroll - JustAnABDL - 2024-02-23

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/comments/yt3p4v/i_just_released_my_custom_webui_css_theme_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
Smiling-face

RE: CSS - Background image fixed during scroll - Tim - 2024-02-25

You're very welcome!

RE: CSS - Background image fixed during scroll - JashLathiya - 2024-06-11

Can I get this Theme or CSS?