logo
search
Others

How to Use One Background Image Across SharePoint Sections

Kushani NimanthikaKushani Nimanthika Sep 27, 2026 869 views

Question details

The user wants to apply a single continuous background image across three distinct sections on a SharePoint page without misalignment.

How to Use One Background Image Across SharePoint Sections
Product
Microsoft SharePoint
Device & OS
not provided
Scenario
Customizing the visual layout of a modern SharePoint page containing multiple sections.
Observed behavior
SharePoint does not natively support spanning one background image across multiple sections, and manually splitting the image into three separate parts causes alignment issues.
Before you start

Ensure you have 'Edit' permissions for the SharePoint page you are customizing and have your high-resolution background image saved to your local device.

Solution 1Recommended

Consolidate Content into a Single Section

Since modern SharePoint pages do not natively support spanning an image across multiple distinct sections, the most reliable workaround is to combine your web parts into a single section.

SharePoint dynamically adjusts section heights based on screen size, device type, and content. This responsive behavior makes it nearly impossible to keep split background images perfectly aligned in consecutive sections. Placing all content in one section ensures the background image displays seamlessly.

1
Enter Edit Mode

Navigate to your SharePoint page and click the 'Edit' button located at the top right corner of the screen.

2
Add a New Section

Hover over the left margin of the page canvas and click the '+' icon to insert a new section. Choose a layout that best fits your combined content (e.g., One column or Two columns).

3
Apply the Background Image

Click the 'Edit section' button (pencil icon) on the left side of your newly created section. In the properties pane, go to the 'Background' options and upload your desired image.

4
Move Existing Web Parts

Drag and drop the web parts from your previous three sections into this single new section, arranging them as needed.

5
Publish Changes

Once your layout looks correct over the unified background, click 'Republish' or 'Save as draft' at the top right to apply your changes.

Consolidate Content into a Single Section
Advanced Development Options: If a single section restricts your layout needs, you will require a custom development solution. Consider submitting a feature request through the SharePoint Feedback Portal or asking for custom SPFx (SharePoint Framework) solutions in Microsoft Q&A using SharePoint development tags.
Free Microsoft Office alternative

Enhance Your Document Productivity with WPS Office

While SharePoint handles your intranet sites, creating and managing the documents hosted on them is easier with WPS Office. Enjoy a free, lightweight, and powerful Office suite that handles all your standard document needs.

Fully compatible with Microsoft Office formats (.docx, .xlsx, .pptx) for seamless SharePoint integration.Lightweight installation ensures fast performance without bogging down your system.Familiar tabbed user interface guarantees a smooth transition with zero learning curve.All-in-one suite allows you to manage Word, Excel, and PDF files in a single window.
microsoft office alternative - wps office

Frequently Asked Questions

Can I use custom CSS to force a background image across multiple SharePoint sections?

No. In modern SharePoint pages, injecting custom CSS directly is restricted by design to ensure page responsiveness and security. Advanced styling requires deploying custom SharePoint Framework (SPFx) web parts.

Why do my split background images misalign when viewed on different monitors?

SharePoint pages are highly responsive. The system automatically adjusts section padding, margins, and heights based on the screen resolution and browser window size, which disrupts the precise alignment of split images.

What is the recommended size for a SharePoint section background image?

While there are no strict limits, it is best to use high-quality images that are at least 1920 pixels wide in landscape orientation. Keep the file size under 1MB to maintain optimal page loading speeds.