Back to Community
Home / Community / Plugin → Page builder by siteorigin

Troubleshooting Responsive Background Images in Page Builder by SiteOrigin

22 threads Sep 10, 2025 Plugin → Page builder by siteorigin

Content

Getting your background images to look perfect on both desktop and mobile can be a common challenge when using Page Builder by SiteOrigin. This guide will walk you through the most frequent issues and their solutions, based on community troubleshooting.

Common Responsive Background Image Issues

Users often report problems where background images appear cut off, display the wrong section, or fail to show up entirely on mobile devices, even though they look fine on desktop. These issues typically stem from how CSS background properties interact with different screen sizes.

Why This Happens

The core of the issue lies in the default CSS applied to background images. By default, Page Builder by SiteOrigin often uses background-size: cover; and background-position: 50% 50%; for rows. On mobile, the aspect ratio of the row changes, which can cause cover to zoom in on an undesired part of the image. Furthermore, some themes or plugins add their own CSS rules that can override or conflict with the page builder's settings.

How to Fix Responsive Background Images

1. Adjust Background Position for Mobile

If the mobile view is showing the wrong part of your image (e.g., the top instead of the center), you can use custom CSS to change the background position specifically for smaller screens.

@media (max-width: 680px) {
    .panel-grid-cell .so-panel {
        background-position: center center !important;
    }
}

Replace center center with your desired position, such as 75% 50% to focus on the right side of an image.

2. Change Background Size

The default cover value will always fill the entire row, which can lead to important parts of the image being cropped out on mobile. You can change this to 100% or contain for a more predictable behavior.

@media (max-width: 680px) {
    .panel-grid-cell .so-panel {
        background-size: 100% !important;
    }
}

3. Override Fixed Background Attachment

The 'Fixed' background option (parallax) is often disabled on mobile by themes for performance reasons. If you need to keep it, you will have to manually override this behavior with CSS. You will need to find your row's unique ID using a browser inspector tool.

@media (max-width: 680px) {
    #pg-1234-1 > .panel-row-style {
        background-attachment: fixed !important;
    }
}

4. Use a Different Image for Mobile

For complete control, you can use a media query to load an entirely different background image on mobile devices, ensuring it's perfectly tailored for the smaller screen.

@media (max-width: 680px) {
    .panel-grid-cell .so-panel {
        background-image: url('path-to-your-mobile-image.jpg') !important;
    }
}

General Troubleshooting Steps

  • Plugin Conflict Test: Temporarily deactivate all plugins except Page Builder by SiteOrigin to see if the issue resolves. If it does, reactivate them one-by-one to find the culprit.
  • Check for Typos: If you've added custom CSS to a row's 'CSS Styles' field in the Attributes panel, ensure there are no typos or incorrect class names. A single mistake can prevent the styles from being applied.
  • Clear Caches: Always clear any site, server, or browser caches after making CSS changes to ensure you are viewing the most recent version of the site.

By understanding how CSS background properties work and using targeted media queries, you can gain full control over how your background images appear on any device.

Related Support Threads Support