Hi,
On the site I’m building certain backgrounds on slides don’t show on preview and also not on the published site.
Is this a common problem with a known fix?
Here is my site Read-Only:
Hi @phelan 
To make sure I completely understand what you need, can you please do a screen recording of the issue so I can further investigate? You can use a free app called Loom to do this.
Hi, Thanks for your reply.
I read somewhere on the forum that it helps if the image names are just 8 characters long.
I will give this a try and report back if the problem persists.
Hello Nelson,
I appreciate the help, thanks.
The problem persists. Background images in sliders not showing on mobile. See Videos below:
On Desktop:
On Mobile:
Here is a new link to the site:
https://preview.webflow.com/preview/bingohavel-bbb616ded6f8782c7da4b9002af9?utm_medium=preview_link&utm_source=designer&utm_content=bingohavel-bbb616ded6f8782c7da4b9002af9&preview=73ad3d21828040f57d4684419d358282&workflow=preview
Hi,
I played around a bit more… the problem disappears when I remove the slider-eight property, which is set to auto. But unfortunately I want it to be set to auto! Is there a fix for this?
Thank you.
Any ideas to resolve the issue? Auto-height slider does not show backgrounds on mobile?
Cheers
Hi @phelan, thanks for your update.
When you apply a background image to an element such as a slide but the slide has no other nested content, the background image does not give the slide any dimension.
If you set the slide to say 100% width and 100% height, then it may show if the slide is able to expand to 100% height and width of the slider height.
I see some slides there without any content, just a background image, so you will need to give some dimension like height or width, the auto style allows the slider to collapse on itself to a 0px by 0px div if there is no content or no dimension, and appears as if the image is missing on the page, because it is not visible at 0px by 0px.
Does this help?
At the moment the Webflow slider does not auto calculate for slide height, the slider will normally has as much height as the tallest slide in the set of slides in the slide mask.
There are custom script sliders that you can implement to a Webflow site like a Slick Slider which does do auto-height calculation for individual slides. If you search the forum for Slick slider that may be another potential option to achieve the goal.
Hi Dave,
Thanks for your reply.
For this reason the first slide is an actual image… The first slide would then set the height for my slider. It does work like this for windows and android devices. The background images are not showing up on Macs and IOS though…
As an alternative i tried to put actual images into the sliders which I set to cover and position bottom left for example. Those slides show up on iOS but don’t cover the slide. they default to contain on ios…
A “solution” is to put a transparent png with the same dimensions as the first slide on every slide and give this png a background image set to cover. This also seems to work on iOS.
Bit of a convoluted way of doing things.
The slides themselves don’t seem to respond to 100% height or width unfortunately.
But it makes sense that they apparently collapse to 0px because iOS thinks they are empty. Bit frustrating that what you see in webflow is not what you get sometimes but I guess that would be impossible with so many browsers and OS’s .
hi @phelan that is not technically correct anything that have something in background and doesn’t have height set it will always be considered as 0px no mother what browser you use. Thing about it as if you will place on background just color. WF does offer visual feedback even when you insert empty div so you can see it but technically doesn’t have any height dimension.
Wow,
hugely appreciate you taking the time. thank you.
I will try to follow the steps you took and will report back.
P
Hello, I just wanted to report back.
It is true that the slider collapsed to 0px when nothing but the background as in them.
I solved the issue by placing SVG’s with my desired aspect ratios into the sliders. With this solution the the image ratios are kept over all breakpoints.
Thanks all for the support.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.