Stop image movement on Homepage slider when scrolling

Dear Sydney Team,

In the header slider, I am using images with the
same size as the images in the demo 1920 x 1275.
However, my images have a title at the bottom of
the image which is not seen when I first call
the page. After scrolling down the title
become visible. I have tied making the image shorter,
but this just increases the white space between
the image and the main content. Also, the movement
of the image in the slider is not desired.

Is it possible to stop the movement of the image in
the header slider on the home page and to have it
show the whole image?

Kind Regards,
John

Hi John,

Could you please to share the URL of your site?

Regards,
Awan

Dear Awan,

Thank you for your replay. Since the page has not been published, I have placed the images in the header of a Sydney demo here:
http://dragonkids.de/Sydney/

It is still possible to see the same effect; the text at the bottom of the pictures cannot be seen.

Kind regards,
John

Hi,

Thank you for letting me know your issue by duplicating your site to another.

Have you try to reduce the height of the image size? Or you can also try to reduce the height of your image using these CSS code:

.slides-container .slide-item {
    background-size: 100% 98%;
}

You can add these CSS code to : customize > additional CSS.

Regards,
Awan

Dear Awan,

Thank you for your code. It did a lot and with
it we are now two thirds there! The text can be
seen at the bottom of the images and the images
do not move in the slider any more when the page
is scrolled down. That is exactly what is needed.
However, the images are now skewed in their
proportions. You can see them here:
http://dragonkids.de/Sydney/

Is it maybe possible to get the images to show
in the correct proportions again?

Kind Regards,
John

Hi,

About the image, I suggest you to edit the image content (text position, etc), so it will displayed as well in the slider.

I see, Currently you are using the same size of the image with our image in the header slider(in our demo website). But still, the image need to be cropped to make it displayed properly and responsively in any device screen.

Regards,
Awan

Then, about the slider movement. There is no option to stop the slider when the page scrolled, the slider are moved automatically and you will need a customization of the existing code (javascript code) and its beyond our support policy, but maybe you can try to hire a wordpress developer from the job-marketplace like Codeable or Upwork to help you.

Dear Awan,

Yes, I see. I will try working with the image size
and go from there. Thank you for your ideas
and your support.

Kind Regards,
John