A sample PDF template showing off the background colour, gradient and image support. You will need to create an image called `image.png` and put it in the `/images/` directory along with the template.

example-backgrounds.php

<?php

/**
 * Template Name: Example Backgrounds
 * Version: 0.1
 * Description: A sample PDF template showing off the background colour, gradient and image support
 * Author: Gravity PDF
 * Group: Example
 * License: GPLv2
 * Required PDF Version: 4.0
 */

/* Prevent direct access to the template (always good to include this) */
if ( ! class_exists( 'GFForms' ) ) {
	return;
}

?>

<style>
	/* Using named @page parameter with <pagebreak/> */
	@page fullpageimage {
		background: url(<?= __DIR__ ?>/images/image.png) no-repeat 0 0;
		background-image-resize: 4; /* see http://mpdf.github.io/css-stylesheets/supported-css.html for details on this option */
	}

	div {
		margin: 5mm 0;
	}
</style>

<!-- BACKGROUND COLOR -->

<!-- Standard Hex Backgronud colour -->
<div style="background: #4a85e7; height: 20mm">
	This is my content
</div>

<!-- RGB() Background Colour -->
<div style="background: rgb(74, 133, 231); height: 20mm">
	This is my content
</div>

<!-- RGBA() Background Colour (Transparency) -->
<div style="background: rgba(74, 133, 231, 0.5); height: 20mm">
	This is my content
</div>

<!-- CMYK() Background Colour -->
<div style="background: cmyk(100, 100, 100); height: 20mm">
	This is my content
</div>

<!-- Inline background Colour -->
This is inline content <span style="background: yellow">that should be highlighted</span> and go and do this.

<pagebreak />

<!-- BACKGROUND GRADIENT -->

<!-- Background Linear Gradient -->
<div style="background-image: linear-gradient(red, orange); height: 20mm">
	This is my content
</div>

<!-- Left-To-Right Background Linear Gradient -->
<div style="background-image: linear-gradient(right, red, orange); height: 20mm">
	This is my content
</div>

<!-- Diagonal Background Linear Gradient -->
<div style="background-image: linear-gradient(45deg, red, orange); height: 20mm">
	This is my content
</div>

<!-- Multi-colour Linear Gradient -->
<div style="background-image: linear-gradient(left, red, #f06d06, rgb(255, 255, 0), green); height: 20mm">
	This is my content
</div>


<!-- Standard Radial Gradient -->
<div style="background-image: radial-gradient(yellow, orange); height: 20mm">
	This is my content
</div>

<!-- Radial Gradient with a circle -->
<div style="background-image: radial-gradient(circle, yellow, orange); height: 20mm">
	This is my content
</div>

<!-- Radial Gradient with a circle that doesn't extend past the container -->
<div style="background-image: radial-gradient(circle closest-side, yellow, orange); height: 20mm">
	This is my content
</div>

<!-- Radial Gradient with a circle in the top right -->
<div style="background-image: radial-gradient(circle at top right, yellow, orange); height: 20mm">
	This is my content
</div>

<pagebreak />

<!-- BACKGROUND IMAGE -->

<!-- Basic Background Image with no constraints -->
<div style="background: url(<?= __DIR__ ?>/images/image.png); height: 40mm">
	This is my content
</div>

<!-- Basic Background Image with a Y-constraint -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); background-repeat: repeat-y; height: 40mm">
	This is my content
</div>

<!-- No-repeat Background Image center-aligned horizontally and vertically -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png) background-repeat: no-repeat; background-position: 50% 50%; height: 40mm">
	This is my content
</div>

<!-- Standard background using large image -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); height: 40mm">
	This is my content
</div>

<!-- Tiling large background image -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); background-size: 300px 200px; height: 40mm">
	This is my content
</div>

<!-- Ensure the container contains the background image -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); background-size: contain; height: 40mm">
	This is my content
</div>

<pagebreak />

<!-- Shrink image to fit container width (keep aspect ratio) -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); background-image-resize: 1; background-repeat: no-repeat; height: 40mm">
	This is my content
</div>

<!-- Shrink to fit container height (keep aspect ratio) -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); background-image-resize: 2; background-repeat: no-repeat; height: 40mm">
	This is my content
</div>

<!-- Shrink to fit container width and/or height (keep aspect ratio) -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); background-image-resize: 3; background-repeat: no-repeat; height: 40mm">
	This is my content
</div>

<!-- Resize to fit container width (keep aspect ratio) -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); background-image-resize: 4; background-repeat: no-repeat; height: 40mm">
	This is my content
</div>

<!-- Resize to fit container height (keep aspect ratio) -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); background-image-resize: 5; background-repeat: no-repeat; height: 40mm">
	This is my content
</div>

<!-- Resize to fit width and height -->
<div style="background-image: url(<?= __DIR__ ?>/images/image.png); background-image-resize: 6; background-repeat: no-repeat; height: 40mm">
	This is my content
</div>


<!-- FULL PAGE BACKGROUND -->
<pagebreak page-selector="fullpageimage" />