Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
<?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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.