Color-section parallax image scaling

The whole reason is in the inherent nature of the matter. Background images that are fixed or set as parallax backgrounds must always be able to cover the entire screen in their height. Otherwise gaps could appear when scrolling.
So if you have a landscape image, it will be cropped left and right.
The height indicates the magnification factor. With Parallax, you have to zoom in even beyond this dimension, because the image scrolls with a different ratio.
But you could change the backgrounds via Quick Css and some media query rules.
With Parallax the image is in its own container with the class av-parallax-inner.
here you could even consider the orientation of the device screen.
e.g.:

see example page: https://webers-testseite.de/parallax-page/
make your browser window narrower or go to the portrait and landscape formats as well
_________
Das Ganze liegt in der Natur der Sache. Hintergrundbilder die fixiert oder als parallax Hintergründe gesetzt sind müssen immer den kompletten Screen in ihrer Höhe abdecken können. Sonst würden beim Scrollen Lücken entstehen können.
Wenn du also ein Querformat Bild hast, dann wird links und rechts eben angeschnitten.
Die Höhe gibt den Vergrößerungsfaktor an. Bei Parallax muss sogar über dieses Maß hinaus vergrößert werden, da das Bild mit einer anderen Ratio scrollt.
Du könntest aber via Quick Css und einigen Media Query Regeln die Hintergründe austauschen.
Bei Parallax befindet sich das Bild in einem eigenen Container mit der Klasse av-parallax-inner.
hier könnte man dann sogar auch die Orientierung des Geräte Bildschirmes berücksichtigen.
z.B.:

@media only screen and (max-width: 767px) and (orientation: portrait) {
	.responsive #top.page-id-40289  #myid .av-parallax-inner {
	  background-image: url(/wp-content/uploads/Donkey-Mobile-scaled-1.jpg) !important;
	}
}

siehe Beispielseite: https://webers-testseite.de/parallax-page/
ziehe dein Browserfenster mal schmaler bzw gehe auch in die hoch- und querformate

If you want to keep the aspect ratio, the height determines the enlargement factor if you are using landscape images.
Therefore, I recommend using a different image in portrait format than in landscape format.This avoids that important content is cut off.
________
Wenn du die Seitenverhältnisse beibehalten willst, bestimmt die meist die Höhe eines Querformatbildes den Vergrößerungsfaktor.
Daher empfehle ich dann im Hochformat ein anderes Bild einzusetzen als im Querformat. Hierdurch wird vermieden, dass Bildwichtige Inhalte beschnitten werden.

one more note from me: if an image is so important that cropping the edges might bother the creator, why use it as a background?
If an image is important – why not use it as foreground ;)
____
If the image has more important elements only on one side, you can of course still prevent the left side from being cropped via the positioning (e.g. top left).

@xeovision: fixed: the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
I think that you will not succeed with a fixed section. However, it would be better to see your page live where you tried it. I can then rather give advice on how it might be done.
However, it may be enough as it is here: https://webers-testseite.de/xeovision/
but for a transparent color-section following – the top section had to be 100% screen-height. (100vh)

Or more tricky : background image to html ;)
and transparencies where ever you like : https://webers-testseite.de/xeovision2/

sorry tim that post above goes to @xeovision
___

how about the different background-images if you have a your screen in landscape or protrait mode?
have you installed a child-theme? then test the snippet :

add_filter('avf_parallax_speed','avia_change_parallax_ratio', 10, 2);
function avia_change_parallax_ratio($ratio, $id){
$ratio = "0.3";
return $ratio;
}

you will see that the images have less cropping.

@guenni007, Hi, https://webers-testseite.de/xeovision/ is exactly that i want to do.
Image is as 100% cover… only issue is that ic do not solve the transparent bg in black as you did

I am not shure but i thiong there is a logic topic od building this effect, i did it like this https://ibb.co/S5tNKVY

• This reply was modified 3 years, 6 months ago by xeovision.

@Guenni007 Thank you for the description but this does not work. Still the same grey non transparent block scrolling up.
I have changed the page-ID in the code … have same settings on color section …

This is already soved. Thx.
Thicket can be closed