How can I style my pdf to have a full background?

Question

I'm trying to create a pdf which uses css to completely style the background-color. I can't seem to get the css to give it a full background.

My CSS:

@media print {
    @page {
        background: pink !important; // not showing
         margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
    }
}

html, body {
    box-sizing: border-box;
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    width: 100%;
    font-family: Montserrat;
    background-color: #20333e;
    color: rgba(255, 255, 255, 0.87);
    border: 2px solid red;
}

Which outputs:

I already have the markdown data in json format and am using the package markdown-pdf to create the pdf.

import * as markdownpdf from 'markdown-pdf';

markdownpdf({cssPath: './path/to/my/ebook.css'}).from.string('# CSS Not Full Background').to("./document.pdf", function () {
    console.log("done");
});

How can I style my pdf to have a full background?

@HoangHieu what css setting is this? Is there a code example you can show me? — Jonathan002, May 29 '18 at 07:53
That printer preference, please check this answer to you problem: https://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page/2780518#2780518 — HoangHieu, May 29 '18 at 08:04

score 1 · Answer 1 · answered May 29 '18 at 09:02

1

try adding top, bottom, margin values to body,html element

body,html{
top: 0, bottom: 10, left: 0, right: 0

answered May 29 '18 at 09:02

JustCode

661
1
8
19

score 0 · Answer 2 · answered May 29 '18 at 06:55

0

replace page{...} inside @media print with

body {
        background-color: pink; 
    }

answered May 29 '18 at 06:55

Mohd Tabish Baig

442
4
8

I've tried replacing the @page with body, and the results are still the same. How is it different from selecting the body tag outside @page? – Jonathan002 May 29 '18 at 07:54

How can I style my pdf to have a full background?

2 Answers2