Problem Description:

When you apply a background image to a container using CSS,  the images do not dynamically scale across all screen sizes, but are “stretched” by default to ensure the nicest fit on large screens. We use the

background-size:cover
property in CSS to allow the image to scale somewhat, however this may cause slides with embedded text to be cropped or not shown completely on mobile screens.

If this is removed and you turn on auto, this is what ends up happening:

 

 

 

Answer:

When you just want to scale the slide:

The following will scale your background somewhat. This works best when the important bits of the slide are kept within the center 1000px. Copy and paste the following into the Custom CSS field of your Theme Options area:

.slider li , #title-container{
    background-size: 100% auto !important;
}
You will then need to adjust the overall slider size depending on the device if you notice the slider itself is not fitting the background image.
  1. View your site on a responsive mode tester like responsinator.com
  2. See the following: Full-Width Slider: How to change the slider height. See Full-Width Slider: How to change the slider height
  3. Use that code inside a media query for the screen size you want to fix. See How to Customize the Mobile View in Responsive Themes

 

When your background image has text:

It is always best to use the slider’s functionality to build layered sliders with text or buttons, rather than use an image with these things embedded. The primary reason for this is scaling across screen sizes, and linking, since you cannot link an empty slide.

The above will work for backgrounds with text too, but depending on the screen size, your image could shrink to an unreadable size.  For image-based sliders, consider using any of the free gallery slider plugins under Plugins > Add New. See What plugins are compatible with Obox Themes? for suggestions.