How to specify a fixed indent bottom: 50px not from the border of the block, and the boundaries of the viewport and if the block is more than viewport?

Question

Hi
Please tell me
There is an adaptive unit with the animation, which takes 100% of screen width, the proportions of the block are not changed (and sorry, see question 2), i.e., the height adjusts to the width, and if (for example on widescreen monitors) at a certain width the height does not fit on the screen, the image skalitsa down. You can see it here honey31.esy.es

Question 1 - how to place an item such as a button she had a fixed bottom margin in 50рх not from the border of the block, and from the border and the viewport? It was not position: fixed, 50рх from viewport only on the main screen, not the entire website.

Question 2 - animation made in Edge Animate. Is it possible to rewrite the management styles of the entire animation block so that it remains adaptive, but it would be possible to manipulate them as usual background'ω, namely to set the background-size: cover to scale to fit any viewport and did not go beyond it? Again the link honey31.esy.es
Thank you

Comments

codepen.io/like-a-boss/pen/jbEWgP sketched animation sample. Only on the preprocessors, but you can see Bromiley code

Answer 1

There you have all sizes of IAS runs.
Tailor img. codepen.io/like-a-boss/pen/NGPPjo
Animation. Theory. Write one animation for 10 seconds with a pair of three movements (looking for keys: @keyframes transform: translateX TranslateY), give every element and make her different delay.

Comments

AndreyBLG : Yes, rewrite all the html/css. Make the background with background-size: cover and inside it are absolutely positioning the container with the animation, text and button

---

Thanks for the reply! Yes, there JS controls everything. Your example works on codepen but not in my case)

The problem is that js controls the adaptability while maintaining the exact proportions of the background image, or rather scene (background image with animation icons is one common scene) ie you can only select one, stretch the stage to the width of the viewport or the height of the viewport.

Let's choose width ( live example here honey31.esy.es ) - then at the height of the image does not fit in 100vh on a widescreen monitor and the bottom edge goes into scrolling.

If you choose "scale by height" - the image is 100vh, as if everything is great, but the edges on wide angle white streaks appear, i.e. no scales to width 100%.

In General, the main problem is that the scene (bg + animated icons) always maintains the proportions 1200х720.
In the question I meant how to make it so that the stage could be run as a normal background? If background'have to set the cover - the picture always fits in any format, a square screen, wide angle, when the "background-size: cover" makes no difference.

Whether it is possible in my case to set the stage property to cover? To make the scene adjust to any screen format.
In my example the scene is set classes class="bg Stage_bg"

The task is a difficult hike, except you, no one dare to answer at all
In any case - Thank you)
By the way, a little writing on the website can be a living example and problems with the main screen be viewed here honey31.esy.es