Canvas backgrounds: generated and designer workflows

What you'll do

Compare placement-derived backgrounds with a designer export, then plan a synthetic Executive Overview canvas. You will use the documented Marp template and define an alignment review. No background should contain live numbers, meaningful labels, filter state or navigation controls.

Keep one placement authority

In the spine's default schematic, the layout is computed once. Native PBIR visuals and background artwork read the same frozen placements and design tokens. The image supplies static surfaces: header, accent rail, radius-8 panels, restrained shadows and 3px KPI top rules. Native containers remain transparent, without borders or shadows.

The placement-derived PNG path uses a pinned, timestamp-free encoder without an external editor. Its v2 archetype/background/theme CLI integration is Preview. Do not infer an available command or invent flags from a design document. Confirm the installed schema and approved authoring route before use.

Start from the Marp template

The documented source is brilliant-v1-canvas.marp.md in the pbi-page design assets. It is a one-slide Executive Overview template, not an all-archetype generator. Its front matter selects Marp, 16:9, no pagination and a 1280 x 720 section. It draws the white 72px header, the rail and seven panel surfaces with no text.

/* Geometry excerpt from the supplied Marp template */
.tile {
  top: 96px;
  width: 296px;
  height: 136px;
}
.k1 {
  left: 24px;
}
.k2 {
  left: 336px;
}
.k3 {
  left: 648px;
}
.k4 {
  left: 960px;
}
.hero {
  left: 24px;
  top: 248px;
  width: 811px;
  height: 448px;
}
.ranking {
  left: 851px;
  top: 248px;
  width: 405px;
  height: 216px;
}
.exceptions {
  left: 851px;
  top: 480px;
  width: 405px;
  height: 216px;
}

Use the complete supplied source, including its panel styles, rather than treating this excerpt as a standalone file. In an approved learning checkout containing that asset, the documented optional designer export is:

❯npx @marp-team/marp-cli --images png --html --image-scale 1 --output .tmp/report-design/brilliant-v1-canvas.png packages/powerbi/pbi-page/docs/assets/brilliant-v1-canvas.marp.md

For this one-slide source, the image output is brilliant-v1-canvas.001.png. Scale 2 produces 2560 x 1440; the logical page remains 1280 x 720. HTML support is needed for the shapes. Record Marp and browser versions; Marp is an optional designer tool, never a deployed runtime dependency or a deterministic substitute for the built-in encoder.

Use Figma or PowerPoint consistently

In Figma, create a 1280 x 720 frame and reproduce the final placement manifest. Export the frame at 1x or 2x. In PowerPoint, use a 16:9 slide at a 96px-per-inch design scale: 13 1/3 x 7 1/2 inches. Convert geometry with inches = pixels / 96. The header is 0.75 inches tall; the first tile begins at (0.25,1) inches.

Use numeric placement and verify the actual exported dimensions. Do not stretch a screenshot to hide an incorrect export size. Retain the editable source and compare rounded corners and internal panel alignment, not just the outer image ratio.

Review the installed result

Use Canvas background rather than Wallpaper for panel geometry. The specified image scaling is Fit, with zero background transparency; FitToPage separately scales the report in its viewport. Target an asset below 500KB; above 1MB fails the background policy until optimised.

Verify exact resource resolution, preserve unrelated resources and inspect Desktop, service and required exports. Remove the image temporarily: the report should still communicate titles, units, scope and navigation. Your output is the source/image/placement review packet. Background alignment proves neither rendered numerical accuracy nor interaction behaviour; mobile requires its own layout.

Check your understanding

1. Why must native visuals and static panels share one placement manifest?
2. What changes invalidate a designer image's compatibility record?
3. Why are dates, status text and selected navigation excluded from the background?