Image Element

The Image element renders an image from a URL or a data-bound source field. The URL can be static, dynamically bound to a spreadsheet column, or reference a file stored in Google Drive. Use it for card artwork, icons, symbols, and any visual asset that varies by card.

Properties

Source

Source specifies the image to display. Images in Board Game Builder are loaded from your configured Google Drive folders — you only need to provide the file name.

Source: "{{ArtworkFilename}}"   // data-bound — different image per row
Source: "card-background"       // static file name
Source: "{{CardId}}-art"        // file name constructed from data

The file extension is optional and defaults to .png. A value of "sword-icon" loads sword-icon.png from your Drive folder. To use a different format, include the extension explicitly:

Source: "card-art.jpg"
Source: "{{ArtworkFilename}}.webp"
Source: "faction-logo.svg"

SVG images

SVG files are rendered natively as vector graphics — they scale to any size without losing quality. To load an SVG, include the .svg extension in the source value:

Source: "shield-icon.svg"
Source: "{{IconFile}}.svg"

Board Game Builder looks up the file by name in the Drive folders configured on the Root element. See Drive Folders to set up your image folder.

Fit

Fit controls how the image is scaled to fill its bounding box when the image's natural aspect ratio differs from the element's dimensions:

Contain is the safest default for artwork where you don't want any cropping. Use Cover for full-bleed background images.

For SVG images, only the Contain, Cover, and Fill modes are applied (mapped to FitArea, FitWidth, and FitHeight internally). Because SVGs are vector, they scale cleanly regardless of the fit mode.

Width and Height

Width and Height override the image's rendered size in millimetres, independent of the element's bounding box. When set, the image is resized to exactly these dimensions before the Fit rule is applied within the box. Omit these properties to let the element's bounding box control sizing.

Align

Align controls where the image is positioned within the bounding box after Fit scaling. When the scaled image is smaller than the box (e.g. Contain with a different aspect ratio), Align determines whether it sits at the top/left, center, or bottom/right of the remaining space. Common values: Center, Top, Bottom, Left, Right.

ImageAnchor

ImageAnchor controls the anchor point used when the image is cropped or aligned within its element. This is particularly useful with Fit: Cover where part of the image is cropped — ImageAnchor determines which part of the image remains visible. Available values: None, TopLeft, TopCenter, TopRight, CenterLeft, Center, CenterRight, BottomLeft, BottomCenter, BottomRight. For example, setting ImageAnchor: TopCenter ensures the top of the image is always visible even when the bottom is cropped.

Mask

Mask applies a shape mask to the image, clipping it to the specified shape. This is useful for avatar images, token icons, or any image that should appear in a non-rectangular shape without editing the source file.

Mask Types

Circle — Clips the image to a circular or elliptical shape. The circle is inscribed within the image bounds, creating a smooth rounded effect.

Rounded — Clips the image with rounded corners. You control the corner radius (in millimeters). Each corner can be individually enabled or disabled, allowing you to create shapes like rounded rectangles or even D-shapes by disabling specific corners.

Semicircle — Clips the image to a half-circle or half-ellipse shape. The direction determines which way the curved edge faces:

• Up — Curve at top, flat edge at bottom
• Down — Curve at bottom, flat edge at top
• Left — Curve at left, flat edge at right
• Right — Curve at right, flat edge at left (D-shape)

Usage

Select the mask type from the dropdown in the property editor. For Rounded, enter the corner radius value. For Semicircle, select the direction. For Circle and Rounded, you can optionally toggle individual corners on or off to create custom shapes.

Opacity

Opacity sets the overall transparency of the rendered image, from 0 (fully transparent, invisible) to 1 (fully opaque). Values between 0 and 1 create a semi-transparent effect, useful for background watermarks, overlaid icons, or decorative elements that should show content underneath.

TintColor

TintColor applies a solid color overlay on top of the image. Together with TintAmount, this allows you to colorize images at render time — for example, applying a faction color to a shared icon, or tinting grayscale symbols with a card's theme color. Accepts #RRGGBB hex codes, CSS named colors, and [[ConstantName]] constant references.

TintAmount

TintAmount controls how strongly the TintColor is applied, from 0 (no tint — original image) to 1 (full tint — solid color fill). Values in between blend the tint with the original image proportionally.

Related

• References
• Drive Folders
• Sheet source data