Both background linear and radial gradients are supported and can be applied using the background-image property, which follows the CSS3-specification.
Most properties in this specification are supported, including: multiple colour-stops, opacity, gradient axis (linear) and shape and extent (radial). However, some gradient line definitions like to right corner or to bottom left don't work as expected – but right, left, or 45degs works correctly.
Background images can be included using the URL or full local path – the preferred method using one of the absolute path constants – to the image. You can use the background or background-image, background-position, background-size and background-repeat CSS properties to control the image display. Currently unsupported is multiple background images per container.
<!-- Basic Background Image with no constraints -->
<div style="background: url(<?= __DIR__ ?>/images/image.png); height: 40mm">
This is my content
<!-- Basic Background Image with a Y-constraint -->
Along with the standard CSS-specified background properties, there's also the background-image-resize property which allows you more granular control to shrink or resize the image to match the container. Available options for background-image-resize include:
0 – no resize (default)
1 – Shrink to fit container width (keep aspect ratio)
2 – Shrink to fit container height (keep aspect ratio)
3 – Shrink to fit container width and/or height (keep aspect ratio)
4 – Resize to fit container width (keep aspect ratio)
5 – Resize to fit container height (keep aspect ratio)
6 – Resize to fit width and height
Using background-image-resize is like any other CSS property:
<!-- Shrink image to fit container width (keep aspect ratio)-->