# Print Background Image As Watermark

A tutorial showing how to print a background image in a sheet as a watermark in SpreadJS, including UI and code examples

## Content

SpreadJS enables users to print any background image of their choice as a watermark.

This feature is useful especially when users want to print worksheets along with their company logo, tagline, copyright information, or any other data embedded in the background of each page or several pages to indicate the authenticity of their brand or simply protect their content from getting copied by any other organization.

The [watermark](/spreadjs/api/v19/classes/GC.Spread.Sheets.Print.PrintInfo#watermark) method of the [PrintInfo](/spreadjs/api/v19/classes/GC.Spread.Sheets.Print.PrintInfo) class can be used to print background images as watermarks.

>type=note
> **Note:** 
> The `PrintInfo.watermark` method is used for print-specific watermarks. To display a watermark-style worksheet background image above worksheet content in the worksheet view, print output, and PDF export, use a worksheet background image with `paintOrder` set to `"over-content"`.

The following code sample shows how to print the background image as a watermark.

```javascript
document.addEventListener("DOMContentLoaded", function () {
    // Initialize SpreadJS.
    const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
    spread.suspendPaint();

    // Get the active sheet.
    const activeSheet = spread.getSheet(0);

    // Set row and column counts.
    activeSheet.setRowCount(200);
    activeSheet.setColumnCount(8);

    // Set values.
    for (let r = 0, rc = activeSheet.getRowCount(); r < rc; r++) {
        for (let c = 0, cc = activeSheet.getColumnCount(); c < cc; c++) {
            activeSheet.setValue(r, c, r + c);
        }
    }

    const printInfo = activeSheet.printInfo();

    // Print the watermark on all pages.
    const watermark1 = {
        x: 0,
        y: 0,
        width: 80,
        height: 80,
        imageSrc: "../image/gc1.png",
        page: "all"
    };

    // Print the watermark on selected pages.
    const watermark2 = {
        x: 650,
        y: 1000,
        width: 100,
        height: 80,
        imageSrc: "../image/gc2.png",
        page: "0,1,3"
    };

    printInfo.watermark([watermark1, watermark2]);

    spread.resumePaint();

    document.getElementById("print").addEventListener("click", function () {
        spread.print();
    });
});
```