HTML to PDF: Fix Page Breaks, Margins and Missing Backgrounds

The short answer

Paste your HTML into the HTML to PDF converter, pick A4, Letter or A3 and portrait or landscape, then click Convert to PDF and choose Save as PDF in the print dialog. Most layout problems in the finished PDF are fixed with a few lines of print CSS: break-before: page for page breaks, an @page rule for margins, and print-color-adjust: exact (or the dialog's background graphics option) for missing background colours.

The tool does not have its own PDF engine. It opens your HTML in a new browser window, adds page settings, and starts your browser's print function. That is why the fixes below are CSS and print-dialog settings rather than tool options.

How the converter works

Paste or type HTML in the editor on the left. A sample sales report is loaded so you can see the result straight away, and Load sample brings it back.

Check the Live preview on the right. The preview is sandboxed, so any JavaScript in your HTML does not run there.

Choose a page size (A4, Letter or A3) and an orientation (portrait or landscape).

Click Convert to PDF (Print dialog). A new window opens with your page and, after about half a second, the print dialog appears.

Set the destination to Save as PDF (the exact wording depends on your browser and operating system) and save.

The tool adds this rule before your HTML: @page { size: A4 portrait; margin: 15mm; }, using whatever size and orientation you picked. Everything else comes from your own HTML and CSS. Your HTML is handled inside your browser; the tool does not upload it.

If nothing happens when you click the button, your browser has probably blocked the new window as a pop-up. Allow pop-ups for lazyblink.com and click again.

Fix 1: Content splits in the wrong place

Browsers break pages wherever the content runs out of room. A heading can end up alone at the bottom of a page, or a table row can be cut in half. CSS fragmentation properties let you decide.

What you want	CSS to add
Start a section on a new page	.new-page { break-before: page; }
Keep a block in one piece	.keep { break-inside: avoid; }
Stop a heading being stranded at the bottom	h2, h3 { break-after: avoid; }
Do not split table rows	tr { break-inside: avoid; }

Then add the class to the element, for example <section class="new-page">. Older tutorials use page-break-before: always and page-break-inside: avoid. Those are the legacy names; browsers still understand them, but the break- versions are the current standard.

Two things to know:

• break-inside: avoid is a request, not a guarantee. If a block is taller than a whole page, the browser has to split it anyway.
• Breaks only apply to block-level elements in normal flow. A floated or absolutely positioned element may ignore them, so remove floats from print layouts where you can.

For long tables, put the header row inside a <thead> element. Browsers usually repeat a thead at the top of every printed page, which makes multi-page tables far easier to read.

Fix 2: Margins are too big, too small or uneven

The tool's default is a 15 mm margin on every side. To change it, add your own @page rule inside a <style> block in your HTML:

• Equal margins: @page { margin: 10mm; }
• Different margins: @page { margin: 20mm 15mm 25mm 15mm; } (top, right, bottom, left)
• No margin for a full-bleed design: @page { margin: 0; }

Your rule appears later in the document than the tool's rule, so for the same property yours wins.

If the PDF still looks different from what you set, check the print dialog. Many browsers have a Margins setting (Default, None, Minimum, Custom). Choose Default so the browser uses the CSS value.

Also remember that the page margin and your body padding add together. The sample HTML uses padding: 40px on the body, which sits inside the 15 mm page margin. Reduce one of them if the content looks squeezed.

Fix 3: Background colours and images disappear

This is the most common complaint. When printing, browsers are allowed to drop background colours and images to save ink. MDN's documentation of print-color-adjust explains that with the default value, economy, the browser may make adjustments such as leaving out background images. Table row shading, coloured header bars and highlighted text all vanish.

You have two fixes, and it is worth using both:

In the print dialog, turn on the background graphics option. In Chrome and Edge it is a Background graphics checkbox under More settings.

In your CSS, ask the browser to keep the colours exactly: * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }. The prefixed line helps older Chromium and Safari versions.

MDN notes that user settings take priority, so the CSS cannot force colours if the person printing has switched them off. For a PDF you are making yourself, the checkbox plus the CSS is reliable.

Fix 4: A date, title or about:blank appears at the top or bottom

Those lines are the browser's own headers and footers, not part of your HTML. Because the tool opens your page in a fresh window, the footer may show about:blank instead of a web address. Untick Headers and footers in the print dialog (under More settings in Chrome and Edge) to remove them.

If you want your own footer, such as a company name on every page, an element with position: fixed; bottom: 0; repeats on each printed page in most browsers. Test it, because support for this varies.

Fix 5: Text is cut off on the right or the layout looks squashed

A4 portrait is 210 mm wide. With 15 mm margins, you have 180 mm for content, which is about 680 CSS pixels. A layout built for a 1,200-pixel screen will be shrunk or cropped.

• Switch to Landscape for wide tables.
• Replace fixed widths such as width: 1000px with width: 100% or max-width: 100%.
• Add table { width: 100%; table-layout: fixed; } and td { word-wrap: break-word; } so long values wrap instead of overflowing.
• Check the browser's Scale setting in the print dialog. It should normally be 100% or Default.

Fix 6: Fonts or images are missing

Images and web fonts load from the addresses in your HTML. If an image path is relative, such as images/logo.png, the new window has no website to resolve it against and the image breaks. Use a full address starting with https://, or embed the image directly as a data URI with the Image to Base64 tool.

Give the page a second to load before saving. The print dialog opens after about half a second, which can be too soon for large images or web fonts on a slow connection. If something is missing, cancel the dialog, wait, and print again from that window with Ctrl+P (Cmd+P on a Mac).

A print-ready starting template

Add this block to the <head> of your HTML and adjust from there:

• @page { margin: 15mm; }
• * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
• h1, h2, h3 { break-after: avoid; }
• tr, img, figure { break-inside: avoid; }
• .new-page { break-before: page; }
• table { width: 100%; border-collapse: collapse; }

Common mistakes

• Using screen-only layouts. Sticky headers, sidebars and fixed widths rarely print well. A @media print block can hide them with display: none.
• Expecting JavaScript charts to appear. The preview does not run scripts, and charts drawn by scripts may not finish before the print dialog opens. Use static images for charts.
• Forgetting the background graphics option and then rewriting the CSS several times.
• Huge padding plus page margins, which leaves a narrow column of text in the middle of the page.

Related tools

Clean up your markup first with the HTML Minifier, or turn Markdown into HTML with Markdown to HTML. If the PDF ends up too large to email, shrink it with Compress PDF.