I’ve added a slider with 4 slides, 1 image background on each.
Looks fine on desktop, but the slide images do not size down on smaller previews, like tablet, mobile, etc…the image is the same size, thus, much of it is not visible.
I tried setting the background image to “cover” - but I don’t see any change.
Any ideas?
Ok - so the issue is I should be using “contain”, not cover…
But then the problem become, when the slide container is reduced in width on smaller displays, the image only covers part of the container (because the width matches the container, but the height does not).
Wondering how people deal with this?
Hi @icreate
Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.
Posting guidelines can be found here: Posting Guidelines for the Design Help Category
Thanks in advance! 
PixelGeek - thanks -
Here’s my issue - this slider looks good with the background image at desktop size:
But here is it at tablet size, with the image set to “cover” - you lose the guy on the side:
And here it is at tablet size, with the image set to “contain” - the slide shows empty space at the bottom:
I guess I could use “contain” and adjust the slide height for each breakpoint. But then it messes up the rest of the layout in terms of spacing…the only other alternative I can think of is to use “cover”, and only use photos that are “ok” if they lose some visible areas…
Open to suggestions. Thanks in advance.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
