Edit online

Background Images

You can use background images to impose a texture. You can use them to decorate an entire page, or a specific element from your document.

Supported properties:

background-image
background-repeat
background-position

Page Background Images

You can set a background for a page. Usually, you do this for the cover page to impose a full-page artwork, or to add graphics to the header and footer of the page. Here is an example of how can you do it for the page:

@page cover {
    size:A4;
    margin:1in;    
    background-image:url("images/my_book_cover_artwork.png");
    background-repeat:no-repeat;
}

div.cover {
    page: cover;
}

Note: It is better to use SVG for the page artworks. It does not suffer from pixelation. If you are limited to using raster images, you can fine-tune their resolution by using the image-resolution property.

Note: To separate the header and footer from the main content using visual effects (lines, shadows, etc.), you can use a full page size artwork in SVG and set it to the default page:

@page {
    background-image:url("images/my_header_footer_artwork.svg");
    background-repeat:no-repeat;
}

If your artwork is smaller, consider a "DRAFT" watermark (for instance). You should use the background-position to place it where you need:

@page {
    ...
    background-image:url("images/draft.svg");
    background-position: bottom center;
    ...
}

Element Background Images

You can style the background of your elements the same as for web pages:

section {
    background-image: url("my_repeating_pattern.svg");
    background-repeat: repeat-y;
}