How to Add a Background Image for the Cover
Edit online

The simplest way is to create an SVG image as large as the entire physical page and set it as the background for the front-page.

Consider the following SVG document. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="8.5in" height="11in">
    <desc>A gradient as big as a page.</desc>
    <defs>
        <linearGradient id="lc"
            x1="0%" y1="0%"
            x2="0%" y2="100%"
            spreadMethod="pad">
            <stop offset="0%"   stop-color="#00DD00" stop-opacity="1"/>
            <stop offset="100%" stop-color="#00AA00" stop-opacity="1"/>
        </linearGradient>
    </defs>    
    <rect x="0" y="0" width="100%" height="100%" rx="10" ry="10"
        style="fill:url(#lc);
        stroke: #005000;
        stroke-width: 3;"/>
    <text x="45%" y="95%"  color="#FFFFAA" font-size="0.7cm"> Sample </text>
</svg>

It shows a gradient (but it can be anything, created with any tool) and the "Sample" text. It is as large as a US-LETTER page and can be used in a publication using this page size.

Note: You can use raster image formats (such as PNG or JPEG), but it is best to use vector images (such as SVG or PDF). They can be scaled and produce better results when printed.

In your customization css, add the following:

@page front-page {
    background-image: url("us-letter.svg");
    background-position:center;
}
Note: For smaller artworks, you can use background-position with percentage values.
Note: The text from the SVG or PDF background images are searchable in the PDF reader.