Skip to content

feat: broaden the spanning guide to any number of monitors #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rvanbaalen merged 2 commits into from
Oct 12, 2026
Merged

feat: broaden the spanning guide to any number of monitors #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5fd6c3d
feat: broaden the spanning guide to any number of monitors
rvanbaalen Oct 12, 2026
f62a0cc
Merge remote-tracking branch 'origin/main' into feat/multi-monitor-guide
rvanbaalen Oct 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions public/_redirects
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Both forms are listed: redirects run before html_handling, so a bare path would otherwise take two hops.
/guides/span-wallpaper-across-two-monitors-mac /guides/span-wallpaper-across-multiple-monitors-mac/ 301
/guides/span-wallpaper-across-two-monitors-mac/ /guides/span-wallpaper-across-multiple-monitors-mac/ 301
4 changes: 2 additions & 2 deletions src/pages/404.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const destinations: Destination[] = [
{
name: 'Guides',
path: '/guides/',
what: 'Spanning two monitors, and how bezel compensation works',
words: 'bezel compensation span two monitors gap seam tutorial how to step by step',
what: 'Spanning several monitors, and how bezel compensation works',
words: 'bezel compensation span multiple monitors gap seam tutorial how to step by step',
},
{
name: 'About',
Expand Down
2 changes: 1 addition & 1 deletion src/pages/guides/bezel-compensation.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ import TextPage from '../../layouts/TextPage.astro'
<p>SpreadPaper is written in Swift and SwiftUI, sandboxed, and released under the MIT licence. It needs macOS 15 Sequoia or later, on Intel or Apple silicon. The code is at <a href="https://github.com/spreadpaper/SpreadPaper">github.com/spreadpaper/SpreadPaper</a>, so none of the above has to be taken on trust.</p>
<p>Got an arrangement this handles badly, a mix of densities that comes out wrong, or a correction to the write-up? Open an <a href="https://github.com/spreadpaper/SpreadPaper/issues">issue</a> and it gets fixed in the app or on this page.</p>
<div class="note">
<p>Next: if you came for the theory and now want the steps, <a href="/guides/span-wallpaper-across-two-monitors-mac/">spreading one wallpaper across two monitors on a Mac</a> covers the practical side, from choosing an image to applying it across both screens. The rest of the writing is on the <a href="/guides/">guides page</a>.</p>
<p>Next: if you came for the theory and now want the steps, <a href="/guides/span-wallpaper-across-multiple-monitors-mac/">spreading one wallpaper across multiple monitors on a Mac</a> covers the practical side, from choosing an image to applying it across every screen. The rest of the writing is on the <a href="/guides/">guides page</a>.</p>
</div>
</Prose>
</TextPage>
22 changes: 11 additions & 11 deletions src/pages/guides/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import Prose from '../../components/Prose.astro'
import TextPage from '../../layouts/TextPage.astro'

const SPAN = '/guides/span-wallpaper-across-two-monitors-mac/'
const SPAN = '/guides/span-wallpaper-across-multiple-monitors-mac/'
const BEZEL = '/guides/bezel-compensation/'

/** A question someone arrives with, and the section of a guide that answers it. */
Expand All @@ -16,18 +16,18 @@ type Question = {

const questions: Question[] = [
{
q: 'Why does macOS put the same wallpaper on every screen?',
src: 'Spread one wallpaper across two monitors',
href: `${SPAN}#why`,
q: 'Why does macOS not run one wallpaper across my screens?',
src: 'Span a wallpaper across multiple monitors',
href: `${SPAN}#macos`,
},
{
q: 'How do I get one photograph across two monitors?',
src: 'Spread one wallpaper across two monitors',
q: 'How do I get one photograph across several monitors?',
src: 'Span a wallpaper across multiple monitors',
href: `${SPAN}#steps`,
},
{
q: 'Can I do it without installing anything?',
src: 'Spread one wallpaper across two monitors',
src: 'Span a wallpaper across multiple monitors',
href: `${SPAN}#manual`,
},
{
Expand All @@ -41,16 +41,16 @@ const questions: Question[] = [
href: `${BEZEL}#example`,
},
{
q: 'What about three displays, or a portrait screen?',
src: 'Spread one wallpaper across two monitors',
href: `${SPAN}#more-displays`,
q: 'What about three displays, a portrait screen or mixed sizes?',
src: 'Span a wallpaper across multiple monitors',
href: `${SPAN}#setups`,
},
]
---

<TextPage
title="Guides | SpreadPaper"
description="Questions that come with one wallpaper across several Mac displays: spanning two monitors, doing it by hand, and how bezel compensation works."
description="Questions that come with one wallpaper across several Mac displays: spanning multiple monitors, doing it by hand, and how bezel compensation works."
socialDescription="Guides to running one wallpaper across every display on a Mac."
eyebrow="Guides"
heading="Guides to one picture across every display"
Expand Down
240 changes: 240 additions & 0 deletions src/pages/guides/span-wallpaper-across-multiple-monitors-mac.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,240 @@
---
import Icon from '../../components/Icon.astro'
import Prose from '../../components/Prose.astro'
import TextPage from '../../layouts/TextPage.astro'
---

<TextPage
title="How to span a wallpaper across multiple monitors on a Mac"
description="macOS gives each display its own wallpaper. To run one image across all of them, size it to your layout, slice it per display and allow for the bezel gap."
socialDescription="One photograph across every monitor on your Mac: size the image to your layout, slice it for each display and line the join up across the bezels."
eyebrow="Guide"
heading="How to span a wallpaper across multiple monitors on a Mac"
lead="macOS gives each display its own wallpaper. This is the whole job of running one image across all of them, from sizing the photograph to lining the picture up across the gaps between the screens."
>
<Prose>
<h2 id="macos">How macOS handles wallpaper</h2>
<p>
Each display takes its own image. System Settings sets one image per display, and macOS runs
no single image across all of them.
</p>
<p>
Spanning one image therefore means cutting the photograph into one piece per display, sized to
that display's own resolution, positioned to match where the monitors sit on your desk, then
setting each piece as that display's wallpaper. An app can do it in a few clicks, or you can
do it by hand. Both routes are below.
</p>

<h2 id="before">What you need before you start</h2>
<p>
The image has to cover the bounding box of your display arrangement: the arrangement in
System Settings, in points, times the scale of the sharpest display. Summed widths give the
same number only for matched displays side by side. Anything smaller is enlarged to fit, which
is where soft wallpapers come from.
</p>
<dl class="dl">
<div>
<dt>Two 1080p side by side</dt>
<dd>3840 pixels across</dd>
</div>
<div>
<dt>Two 1440p side by side</dt>
<dd>5120 pixels across</dd>
</div>
<div>
<dt>Two 4K side by side</dt>
<dd>7680 pixels across</dd>
</div>
<div>
<dt>Three 4K side by side</dt>
<dd>11520 pixels across</dd>
</div>
<div>
<dt>Two 4K stacked</dt>
<dd>3840 pixels across, 4320 tall</dd>
</div>
<div>
<dt>A 4K display at 2x beside a 1080p display, both 1920 points wide</dt>
<dd>7680 pixels across, because the 4K display is the sharper one</dd>
</div>
<div>
<dt>A laptop 1512 points wide beside a display 2560 points wide, both at 2x</dt>
<dd>8144 pixels across</dd>
</div>
</dl>
<p>
Aim a little above the number. Bezel compensation hides a strip of the image behind each
monitor's housing, and you want those pixels to exist rather than be invented by the scaler.
</p>

<h2 id="steps">Spanning the wallpaper with SpreadPaper</h2>
<p>
SpreadPaper needs macOS 15 Sequoia or later. It reads your display arrangement and does the
slicing for you.
</p>
<div class="steps">
<section class="step step-full">
<div class="step-text">
<p class="step-kicker">Arrange</p>
<p>
<strong>Open System Settings, then Displays, and drag the rectangles until they match
how the monitors sit on your desk.</strong> SpreadPaper reads that arrangement, so
getting it right here is what makes everything afterwards line up.
</p>
</div>
</section>
<section class="step step-full">
<div class="step-text">
<p class="step-kicker">Install</p>
<p>
<strong>Download SpreadPaper and drag it to your Applications folder.</strong> macOS
warns you the first time you open it, and the <a href="/help/">help page</a> walks you
past that.
</p>
</div>
</section>
<section class="step step-full">
<div class="step-text">
<p class="step-kicker">Choose</p>
<p>
<strong>Open the app and choose your image.</strong> The preview draws your displays in
their real arrangement with the photograph laid across them.
</p>
</div>
</section>
<section class="step step-full">
<div class="step-text">
<p class="step-kicker">Position</p>
<p>
<strong>Drag the image into place, zoom to fill the width and flip it if the
composition works better reversed.</strong> Aim for a subject that no bezel cuts in half.
</p>
</div>
</section>
<section class="step step-full">
<div class="step-text">
<p class="step-kicker">Bezel gap</p>
<p>
<strong>Raise the bezel value until a horizon or a roofline runs through the seam
unbroken.</strong> This is the step that makes the picture read as one picture instead
of two neighbouring ones.
</p>
</div>
</section>
<section class="step step-full">
<div class="step-text">
<p class="step-kicker">Apply</p>
<p>
<strong>Click Save &amp; Apply.</strong> Each display is rendered at its own native
resolution, so a 4K monitor gets 4K pixels and the 1080p monitor beside it gets its own.
</p>
</div>
</section>
<section class="step step-full">
<div class="step-text">
<p class="step-kicker">Save</p>
<p>
<strong>Keep it as a preset to bring it back later.</strong> From there you can also set
a separate Light and Dark wallpaper, or put a set of images on a time of day schedule.
</p>
</div>
</section>
</div>
<div class="actions">
<a
class="cd-button cd-button-primary h-12 px-6 text-base focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cd-accent"
href="https://github.com/spreadpaper/SpreadPaper/releases/latest"
><Icon name="download-simple" width="18" height="18" />Download for macOS</a
>
</div>

<h2 id="setups">Two, three or more monitors, portrait and mixed sizes</h2>
<p>
The same steps spread one image over any number of displays. What changes is the size of the
image you need and how you arrange the displays.
</p>
<h3>Three or more monitors</h3>
<p>
Arrange all of them in System Settings and choose an image as wide as the whole row. Three 4K
monitors side by side want 11520 pixels across. Set the bezel on each display: the gap between
two neighbours is the sum of their two facing frames.
</p>
<h3>Mixed sizes and resolutions</h3>
<p>
Size the image for the sharpest display. Every display gets its own slice, rendered at its own
resolution, so a 4K display and a 1080p display beside it share one photograph and each
keeps its own pixels.
</p>
<h3>A portrait screen</h3>
<p>
Rotate the display in System Settings and arrange it beside the others. It takes a taller
slice of the same photograph, so choose an image tall enough to stretch over the portrait
screen as well as wide enough to spread across the row.
</p>
<h3>Monitors stacked vertically</h3>
<p>
Arrange them one above the other. The image now needs height: two 4K monitors stacked want 4320 pixels
tall. The vertical bezel is the one to set, because the frames that matter are the top and
bottom edges.
</p>
<h3>A laptop beside an external display</h3>
<p>
Place the laptop in the arrangement where it sits on the desk, including how much lower its
screen is. SpreadPaper reads that offset and slices to match. Bezels are set per display, so
give the laptop its own value.
</p>

<h2 id="bezels">Getting the join right across the bezels</h2>
<p>
The housings of two monitors sit between their panels, and the picture has to carry on behind
them the way a view carries on behind a window frame. Without compensation a horizon steps as
it crosses the join and a road kinks.
</p>
<p>
Bezel compensation leaves out the strip of image that would fall behind the frames. The value
is in points, the same units as the display arrangement. Set it by eye: raise it until a long
straight line crosses the seam intact. On a pair of 27 inch 1440p monitors that usually lands
near 70.
</p>
<div class="note note-accent">
<p>
<a href="/guides/bezel-compensation/">The bezel compensation guide</a> goes through what to
measure, how to check the result, and why the gap is not the same as the frame you can see.
</p>
</div>

<h2 id="manual">Doing it by hand</h2>
<p>
You can do it in an image editor. Scale the photograph to the arrangement, cut one file per
display, and set each file as that display's wallpaper in System Settings.
</p>
<p>
For each display, the slice is the part of the image over that display's rectangle in the
arrangement, with the bezel strips left out, exported at the display's own native resolution.
Nudging the photograph, moving a monitor or plugging in a laptop means cutting every slice
again.
</p>

<h2 id="fixes">Fixing a soft image or a step at the seam</h2>
<dl class="dl">
<div>
<dt>The wallpaper looks soft</dt>
<dd>Use an image at least as wide as the table above gives for your setup.</dd>
</div>
<div>
<dt>A horizon steps up or down at the seam</dt>
<dd>Raise the bezel value until the line runs through unbroken.</dd>
</div>
<div>
<dt>The picture is offset between displays at different heights</dt>
<dd>Match the arrangement in System Settings to how the displays sit on the desk, then reapply.</dd>
</div>
</dl>

<p class="see-also">
Where to go next: <a href="/guides/bezel-compensation/">bezel compensation</a> is the detail
behind the step that does most of the work. <a href="/help/">Help</a> walks the first launch
warning through in three steps. <a href="/guides/">The guides</a> have the rest.
</p>
</Prose>
</TextPage>
Loading
Loading