Example of Background Images and Rounded Corners in PDF

Background Images and Rounded Corners

The plugin ships with a number of PDF templates showing off the features of mPDF. These can be found in your PDF_EXTENDED_TEMPLATES directory.

Overview

To easily switch between custom PDF templates change the template query string parameter to the template name when viewing a PDF via your admin area.

Template Name: example-backgrounds-and-borders02.php Example URL: https://test.com/?gf_pdf=1&fid=3&lid=40&template=example-backgrounds-and-borders02.php

mPDF has great support for background colour, images and even gradients. Along with this, it supports border-radius so you can easily add rounded corners to your PDFs.

Download Example PDF

Defining Gradients

mPDF follows the CSS3 specification for defining gradients. You can set the gradient using background: linear-gradient() and background: radial-gradient().

Example:

/* start linear gradient from the bottom and render upwards – blue at bottom and white at the top */
background: linear-gradient(bottom, #0b91c2, #FFFFFF);

/* start linear gradient from the top and render downwards. #e1e1e1 will cover 65% of the area. */
background: linear-gradient(top, #e1e1e1 65%, #c7c7c7);

/* run a linear gradient at 45 degrees to the element. */
background: linear-gradient(45deg, blue, yellow);

/* Using three colours in the gradient and controlling the percentage they cover. */
background: linear-gradient(top, blue, yellow %75, red %10);

/*create a radial gradient with the circle in the centre */
background: radial-gradient(center circle, red, green);

/*create a radial gradient with the circle in the top left */
background: radial-gradient(center circle, red, green);

/* have the circle in the bottom left corner using three colours */
background: radial-gradient(farthest-side at left bottom, red, yellow 50px, green);

Background colour is the only property that can be set on inline elements. Background image and gradient can be set on block elements, @page and the body tag.

background-images support JPG, GIF, PNG, WMF and SVG images.

You can view the W3 specification which details the usage of these CSS statements.

• CSS3 linear gradients - https://dev.w3.org/csswg/css3-images/#linear-gradients
• CSS3 radial gradients - https://dev.w3.org/csswg/css3-images/#radial-gradients

Rounded Corners

mPDF also supports the CSS3-spec border-radius property. You can use the default border-radius syntax to define all corners:

border-radius: 4em;

Or set an individual radius on each corner:

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

View the mPDF documentation for more details about background images/gradients and border radius.