Mobile – Background Image on Slide Layer

Hi @richardkrone

The background image of individual slides can be changed in the Style tab of the Slide, as shown here:

• https://smartslider.helpscoutdocs.com/article/1724-slide#image

If you want to remove the image completely, you can clear the “Slide background” field there. However please note that this image covers the entire slide area, whereas background images set on the Content layer do not. For example, they won’t cover the full slide if you use the “Limit slide width” option or if a Max width is set on the Content layer.

If your goal is to use different slide background images for different device views, then the options you have are:

A.) Display a different slider in the mobile and desktop/tablet view ( in the documentation below we describe how you can hide sliders in different views ):

• https://smartslider.helpscoutdocs.com/article/1980-how-to-hide-the-slider-on-mobile

B.) Or in the Pro version you can select different images for the different views. However, according to the WordPress.org support guidelines:

• https://wordpress.org/support/guidelines/#do-not-post-about-commercial-products

we are not allowed to discuss commercial products (such as the Pro version) here. So if you would like more information about this feature, please contact us directly through our ticket system:

• https://smartslider3.com/contact-us/support/

and we’ll be happy to help you there.

Best regards,
Laszlo.

Hi @richardkrone

Yes, the icon in the middle is for the Slide Background video, which is available only in the Pro version. So with the Free version you won’t have some of the options that you see in the documentation.

As for hiding the slide background image in mobile view:

I am sorry, we don’t have an option for that. to do that you should use:

A.) Custom CSS wrapped with a media query that sets the corresponding element to display: none;

B.) Or as an alternative solution, you should:

1. duplicate your slider ( so you will have 1 for desktop/tablet and another for mobile )
2. adjust the mobile view according to your needs
3. then you should hide both sliders from the corresponding breakpoints via custom CSS ( or the Pro version has a built in feature to hide sliders )

Here you can read more about this approach:

• https://smartslider.helpscoutdocs.com/article/1980-how-to-hide-the-slider-on-mobile