How to Make Slider and Widget Backgrounds Responsive

FAQ  How To  Tutorials  Last Updated: Time to Read: 5 minutes

There are two ways to apply images in the Layers Slider, as a background or as a Featured Image.

In CSS, a background fill on an HTML element will not resize itself automatically on a screen smaller than its original dimensions the same way that an image element will. This is because the dynamic sizing of the element, made possible by its width and height being a percentage or “auto” value, is being applied to the HTML element and not the background image Imagine the difference between a photo being placed between two panes of glass and the glass dimensions changed – it is not going to make the photo change, and if you cut the sides off the glass where the photo is, the photo will become cropped. But if you lay the photo on top of the glass, you can now manipulate those two things independently.

There are a few ways you can deal with this elegantly.

In the Layers Slider, we provide an option called “Stretch” that will help your slider backgrounds respond, however it must do this by height in order to ensure the slide remains filled on all screen sizes dynamically. You can find this checkbox in the Background option of the Design Bar, or the Background option of the Slide/Column panel toolbar.

For pros, this sets a CSS background-size  of cover .

This is how our slider CSS looks when you set the Stretch option on the Background image:

The stretch option will make the image as small as it can be, while still filling the entire HTML element (your slide) while maintaining its original aspect ratio.

This causes obvious issues if your slides have embedded text or other content that gets cut off on a 320px wide smartphone screen.

Layering

Before digging into even more advanced restyling hacks, you’ll need to ask yourself what your slider aims to achieve. Ideally you should be using the Layering aspects of the Slider Widget to build your slides responsively, rather than embedding the text in the slide . This means deconstructing a slide image with embedded text and other elements to determine how to use the widget’s options to get the same effect. In most cases, this is as simple as removing the text and subject from the original, then using the original’s background as the background and adding the text and featured images using the slider widget’s design toolbar options. This ensures the content can convert itself to mobile views automatically and is the truest solution to poor scaling of those kind of graphics.

You can see how we do this on the Lace & Sole demo slider:

slide-anatomy

Graphic and Photo Slides

When layering is not an option, or your slides are intended as visual elements such as photos or portfolio items, you may want to consider using a slider that is designed specifically for that application in place of the Layers slider.  Some Layers Extensions like Layer Slider add enhanced sliders tailored for displaying photographic content or graphics.

Free plugins like Master Slider and Meta Slider also offer a responsive image slide mode that works great for these types of setups.

Understand Aspects and Scaling

If you want to use the default Layers Slider widget and a combination of flat and layered slides, then it is important to keep all of the important info within the center of the image. For a 1900px wide slide, this would mean the center 550 pixels or so with Stretch enabled.

You can also use Custom CSS or image replacement to apply custom scaling to graphical backgrounds, explained below:

Via the Advanced option on the widget, you can add some custom CSS to change the kind of background positioning and scaling it uses. Make sure the Stretch option is unchecked first to avoid conflicts.

The first option is  background-size: contain  which makes the image as big as it can be while still fitting inside its element – similar to cover .

In the Custom CSS panel of the Advanced control on your Slider’s Design Bar, we can use the .swiper-slide  class to target all slides in this slider, or the slide’s individual ID. You can find this ID using your browser inspector.

slider-id

You do not need to add this class to the Custom Class field, as it already exists.

Using percent values in the background-size  property gives you the most control over sizing and is helpful if you have a single slide out of whack or need them all to scale as much like a responsive image as possible. This only works well when all slides are the same height and aspect and may require you to customize mobile views to change the slider height to fit your background image height when it is scaled to that width. Keep in mind that text embedded in your slider image can become totally unreadable when the image is scaled down to 320px wide on a smartphone screen. If you plan to use this technique with a full width slider, ensure all the important stuff is in the center 1000px of the slide or see the image replacement method below.

or

For more information on background-size, see the Mozilla guide.

The final option is image replacement with mobile media queries. This advanced technique will change the background image set on the slider using CSS for each threshold you define in the media query, allowing you to inject specially designed and sized images for those screen sizes. This works in tandem with background-size using percentages and requires you to grab the slide ID.

In the Advanced option on the Slider’s Design Bar,  set background-size to fit the height and we choose the width of our image. Note that you can use 100% auto  here as well – you will need to experiment to get the perfect combination for what you are doing.

and finally, we create a media query for every view-port/ threshold to replace the background image. To do this, we need to target this specific slide with the ID. The Images can be uploaded to your media library  where the file URL is located on the right side of the image Edit screen. It must be a full URL path if you use the CSS panel to insert this code. Example:

See How to Test Responsive Views for tips on determining widths