Most of the time, full-width images don’t look that great on mobile view, because they are cropped (which is better than being stretched). One way to get around this is to change the background image once it reaches the mobile responsive breakpoint.
Change the background image for a row on mobile view
- Open the row with the background image for editing and click the Advanced tab.
- Scroll to the CSS selectors section, enter a name in the Class field.
It's a best practice to add a custom prefix to your class names as a namespace, to avoid conflict with other class names used by the theme and plugins. In this example, we'll use the class name ss-uno-row. - Save the row settings.
- In the upper right corner, click Tools > Layout CSS / JavaScript.
- Add the CSS rule below.
Replace the class name with your own class name, and change the URL to point to the mobile background image you want to use. - Click Save.
/* Change background image on mobile view*/
@media (max-width: 767px) {
.fl-builder-content .ss-uno-row > .fl-row-content-wrap {
background-image:url(http://www.domain.com/mobile-background.jpg);
}
}