Section Background Does Not Save: Root Cause and Fix

When you set a background image or color on a SharePoint modern page section, the change may disappear after you save and republish the page. This happens because the section background feature depends on a specific web part property that can be overridden by page layout settings or theme policies. This article explains the exact root cause of the issue and provides a step-by-step fix that preserves the background on all section types.

Why the Section Background Disappears After Saving

SharePoint modern pages allow you to set a background image or color on any section. The setting is stored in the page JSON definition. When you save and publish the page, SharePoint re-renders the page layout. During this process, two things can cause the background to be lost.

First, if the section contains a web part that has its own background property, such as the Hero web part or the Quick Links web part with a background, the section-level background may be overwritten by the web part’s background. SharePoint prioritizes the web part background over the section background.

Second, the site theme can override section backgrounds. A custom theme that defines a background for the section CSS class will force the section to use the theme background instead of the one you set in the page editor. This is a common cause when the theme is applied at the site collection level or the tenant level.

Third, the section type matters. A standard three-column section does not support background images the same way a full-width section does. If you set a background on a standard section, SharePoint may drop the property during save because the layout container does not accept the background property in all browser rendering paths.

Steps to Fix the Section Background Save Issue

Follow these steps in order. Test after each step to confirm the background stays after publish.

1. Change the section to full-width
   Edit the page. Select the section that loses its background. In the section settings panel, change the layout to Full-width section. Full-width sections are the only section type that reliably saves custom background images and colors. After changing the layout, set the background again. Save and publish the page.
2. Check for web parts that have their own background
   Open the page in edit mode. Look at each web part in the problem section. If a web part has a background color or image set, remove the web part background. To do this, edit the web part, go to its layout or styling panel, and set the background to None or Transparent. Save the web part. Then set the section background again. Publish the page.
3. Create a custom theme that does not override section backgrounds
   If the issue persists, the site theme is likely overwriting the section background. Go to SharePoint admin center > Themes > Custom themes. Create a new theme. In the theme JSON, do not include a background property for the section class. Export the current site theme using PnP PowerShell. Look for the sectionBackground or sectionBackgroundImage property. Remove those properties from the JSON. Upload the modified theme. Apply the theme to the site collection. Then set the section background on the page again.
4. Clear the browser cache and republish
   After making changes, clear the browser cache for the site. In Chrome, press Ctrl+Shift+Delete, select Cached images and files, and clear. Reload the page. Open the page in edit mode, set the section background again, and publish. This forces SharePoint to re-render the page JSON without cached theme data.
5. Use the SharePoint REST API to verify the background property
   If the background still disappears, check the page JSON directly. Open the browser developer tools (F12). Go to the Network tab. Reload the page. Find the API call to get the page content. Look for the sectionBackground property in the JSON. If the property is missing after publish, the background was stripped during save. This confirms a theme or web part conflict. Repeat steps 2 and 3.

If the Section Background Still Does Not Save After the Main Fix

Section background works in edit mode but not in view mode

This indicates a CSS conflict. The browser applies the background in edit mode because the editor injects inline styles. In view mode, the theme CSS overrides the inline style. To fix this, add a custom CSS override. Go to Site Settings > Master page and choose a custom CSS file. Add the following CSS: div[data-automation-id="CanvasSection"] { background-image: none !important; background-color: inherit !important; }. This prevents the theme from overwriting the section background. Then set the section background again in the page editor.

Background image does not appear on mobile devices

SharePoint modern pages use responsive design. On mobile viewports, section backgrounds are sometimes hidden to improve performance. This is by design. To force the background on mobile, you must use a full-width section and set the background image with a high-resolution source. Additionally, add a CSS media query: @media (max-width: 640px) { div[data-automation-id="CanvasSection"] { background-image: url('your-image-url') !important; } }. Upload this CSS to the site custom CSS file.

Background color resets to white after publishing

A white background after publish suggests the theme has a default white background for sections. Go to SharePoint admin center > Themes > Custom themes. Edit the active theme. In the theme JSON, find the sectionBackgroundColor property. Set it to an empty string or remove the property. Apply the updated theme. Then set the section color again on the page.

Root Cause	Fix Method	Time to Apply
Standard section type does not support background	Change section to full-width	1 minute
Web part background overrides section background	Remove web part background	2 minutes
Custom theme overwrites section background	Modify theme JSON to remove sectionBackground property	10 minutes
CSS conflict in view mode	Add custom CSS override	5 minutes

You can now fix the section background save problem by changing the section type to full-width, removing conflicting web part backgrounds, and adjusting your site theme. Start by applying the full-width section fix. If the background still does not save, check the theme JSON. As an advanced tip, use the SharePoint REST API to inspect the page JSON after each fix to confirm the background property is present in the saved page definition.