Fixed image or video background inside of panel

JavaScript
1

I don’t think this can be done with CSS - I’ve failed to get this working for one reason or another. Is there a javascript plugin that can fix my image inside of .container ? I would try background-attachment: fixed; but I’d need something that works for images OR video.

2

I’m not really sure what effect you are after but is it something like this (except you’d need to update the height dynamically).

I’m guessing you wanted the image in the center of the viewport at all times but only visible inside the container? (and possible dictated by .containers height but not sure how that would work).

I’m not really clear on the use case :slight_smile:

1 Like
3

Basically I’m looking for the behavior of background-attachment: fixed but it must work with videos as well. Your example is close but during scroll, you see some white between the spacer divs. Close but not quite :slight_smile: . I’m going to keep trying.

4

You would see the same with background attachment fixed also which is why I wasn’t sure of the required behaviour. :slight_smile:

You would need the image to be 100vh tall if you didn’t want any gaps as the container slides over it.

Unless I got the wrong end of the stick as you can usually work this out without my help anyway :slight_smile:

5

I don’t believe so? Here is background-attachment: fixed with no white space: https://fnlst.com/luHvml

Your example: https://fnlst.com/6ImZbi

Thank you - for whatever reason I feel like I’m making this more complicated than it needs to be :slight_smile: .Might start from scratch since I feel like I’m missing something obvious. Moving on and coming back is usually effective for me to get past stupid roadblocks like these :slight_smile: .

6

LOL that’s because you stretched your fixed image to 100% height.

If I do that then mine is the same.

I assumed you wanted the image constrained to a fixed height or a height that matches the container. If you just want an image visible (but fixed) wherever container is in the viewport then the image has to be a viewport height image.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.