Slider background image different sizes on design/preview mode

I have a slider set at Width: Auto height: 800px to fill the screen for a photographers website that has beautiful images.

I do not add an image I just use the background image of the slider to have the image stretched on the slide.

I then utilize “Cover” so the image covers the slide.

The image looks perfect in design mode – but once preview mode is toggled then the image just like zooms in too much. Every time.

Example:

Design:

Preview:

whhhhhhhhhhhyyyyyyyyyyyyyy? I know its something on my end I am over looking but I just can’t understand why the preview mode would change the dimensions of the image.

It does extactly what you ask it to do: it “covers” the area. So when your site is narrower because you are in the designer with a sidebar, the picture covers the area differently. No bug here.

You can’t ask an image to fully cover an area, whatever the dimension of the area is, and stay entirely visible at the same time. It’s one or another.

If you want to keep the head of the character in the picture, in addition to cover, press the up arrow to make the pic sticks to the top and stay there… the cropping will affect the bottom of the image instead of the top.

2 Likes

Hi @Jack_John_Joseph_Ame, @vincent is right. The image will always “cover” the area provided and thus may scale in size accordingly.

Large imagery in web design has been a long discussed topic and is quite challenging especially when you take into account the many different size browsers and preferred viewport sizes.

This article goes over some design recommendations and examples for using large images in sliders. It is pretty cool and has a few great tips: Use of Huge Sliders in Website Design: Best Practice - Designmodo

Hope this helps out a bit! :slight_smile:

3 Likes