Slider images not filling the full screen

Good morning,

I have 3 slider images, all 3 are the same size 1920px x 1440px but only one fills the full page, the other 2 have the grey background image showing at the top and on smaller screens.

How do I get the images to fill the whole page please

Here is the preview link below.
https://preview.webflow.com/preview/leggates-nexus?utm_medium=preview_link&utm_source=designer&utm_content=leggates-nexus&preview=d8d2639afc601d21c712fcefc06ec264&workflow=preview

Hi,
I took a look into your project, I found something weird and I fixed it,
Select the slider property, in the style sidebar, go to layout, click on align Y, click it and reset it, it will be fixed.

1 Like

Thanks for the help. That did move the image to top and fill the space there but now there is a space at the bottom on 2 images (of 3). One image works perfectly but not the other 2.

Hello,
I checked and fixed the problem.
To solve this issue, you need to give a specific height to your slider so that the slider arrows are not below the image and the image takes up the full screen.
Just like in this picture, apply this height for tablet size and below, and make sure the same height is applied for smaller sizes as well, and the problem will be resolved.

1 Like

That has worked perfectly. Thanks for the help

1 Like

You have to check if all three images have the same settings, particularly regarding their size and how they’re set to display within the slider. You should look at the object-fit property and set it to cover. This will help the images fill the entire slider area. Also, make sure the height of the slider is consistent for all images.