Backgrounds & Foregrounds

Screen: Indicates that CSS rules are intended for on-screen viewing. Styles are optimized for digital screens, which typically include considerations like colors and layouts that look good on computer monitors.
Print: Instructs the browser to apply styles tailored for printed documents. This means the CSS rules are optimized for printing, ensuring readability and proper formatting when the HTML content is printed on physical media, like paper.

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 above, 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."