BackgroundImage

The built-in backgroundimage tag — a box that shows an image as its background with content overlaid on top. Usage, options, and live examples.

A box that displays an image as its background, with your content laid over it. Point src at the image, round the corners with radius, and put whatever you like in the block body — it renders on top of the background. The Mantine spacing and sizing system is forwarded, so you can pad and size the box without writing CSS.

Use it as {% backgroundimage %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'backgroundimage', …). Close the tag with {% endBackgroundimage %} (lowercase image).

Demonstrations

Overlaid content

The block body is the overlaid content. Here a white heading sits over the image; p='xl' pads it away from the edges and mah='180' caps the height.

Radius and sizing

radius rounds the corners (xs–xl or any CSS value); the spacing/sizing props (w, h, maw, mah, p, m, …) set and pad the box. A fully round radius plus a fixed w/h makes a circular cover.

With other components

Overlay any built-in tag. Here a {% text %} heading and a caption stack on the background:

Attributes

Omit any attribute to take its default.

CSS Selectors

Target the rendered element through its island marker — [data-aardvark-island="BackgroundImage"] — or through the Mantine Styles API classes (.mantine-BackgroundImage-root and its inner parts):

/* Every rendered BackgroundImage carries this island marker */
[data-aardvark-island="BackgroundImage"] { }

/* Mantine Styles API class on the root element */
.mantine-BackgroundImage-root { }

Injecting Attributes

attr={…} forwards raw HTML attributes — including event handlers — straight onto the rendered element, so you can wire DOM behavior the tag does not expose. The handler can be a full multi-line script, not just one expression — this one logs the value to the console and shows it in an alert: