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 when it reaches the mobile responsive breakpoint. Here’s how.

To change the background image for a row on mobile view:

1. Upload the mobile image to your media library and copy the URL for its location.
2. Open the row with the background image for editing.
3. Click the Advanced tab and scroll to the HTML element section
4. In the Class field, enter a custom class name.
   It’s a best practice to add a custom prefix to your class names as a namespace, to avoid conflict and identify where the class came from. In this example, we’ll use the custom class name ss-changeme.
   Don’t use a period before the class name.
5. Click Save.
6. Add the CSS rule below.
   See the article on where to put custom CSS code.
7. Replace the class .ss-changeme in the code below with your own class, and change the URL to the one you copied in Step 1.

/* Change background image on mobile view*/
@media (max-width: 767px) {
  .fl-builder-content .ss-changeme > .fl-row-content-wrap  {
    background-image:url(https://www.domain.com/wp-content/uploads/2017/10/mobile-background.jpg);
      background-repeat: no-repeat;
      background-size: cover;
  }
  .fl-builder-content .ss-changeme .fl-bg-video {
      display: none;
      visibility: hidden;
  }
}