Backgrounds & Foregrounds

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
// Render a URL as a PDF
    const pdf = await PdfDocument.fromUrl("https://www.wikipedia.org/");

    // Add a background PDF
    const bgpdf = await PdfDocument.open("MyBackground.pdf");
    await pdf.addBackgroundFromAnotherPdf(bgpdf);

    // Add a foreground overlay PDF to the first page
    const fgpdf = await PdfDocument.open("MyForeground.pdf");
    await pdf.addForegroundFromAnotherPdf(fgpdf, 0, 0);
    
    // Save the merged PDF to a file
    await pdf.saveAs("Complete.pdf");
})();

Backgrounds & Foregrounds

You can easily add a background or foreground overlay to either a newly rendered or an existing PDF document.

In the code example below, we begin by rendering a PDF from a specified URL. This PDF serves as the base document. Next, we open another PDF document named "MyBackground.pdf" to use as a background layer.

To add a background, simply pass the background PDF to the addBackgroundFromAnotherPdf method. This action effectively positions the content of "MyBackground.pdf" behind the content of the URL-rendered PDF.

Additionally, we open another PDF document named "MyForeground.pdf" to be used as a foreground overlay. To include a foreground overlay PDF on the first page (page index 0) of the existing PDF, we utilize the addForegroundFromAnotherPdf method. This overlay is then displayed on top of the existing content.

Finally, the merged PDF document, which includes the base PDF, background layer, and foreground overlay, is saved as "Complete.pdf."

Discover how to add dynamic backgrounds and foregrounds to PDFs with our Node.js code example!