Most of the time, full-width images don’t look that great on mobile view, because they are cropped. One way to get around this is to change the background image once it reaches the mobile responsive breakpoint. Here's how.
To 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 and 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-top-row. - Save the row settings.
- Add the CSS rule below.
See the article on where to put custom CSS code. - 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-top-row > .fl-row-content-wrap {
background-image:url(http://www.domain.com/mobile-background.jpg);
}
}