What is the best way to design my PDF with a complete background?

When it comes to creating a pdf with custom styling using CSS, I'm encountering an issue where the background-color doesn't display as expected. Despite my efforts, I can't seem to achieve a full background effect.

Here's the CSS code I'm working with:

@media print {
    @page {
        background: pink !important; // not displaying
         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;
}

This setup results in the following output:

https://i.sstatic.net/1gRJO.png

Currently, I have all the markdown data stored in json format and I am utilizing the markdown-pdf package to generate the pdf file.

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");
});

I'm seeking guidance on how to adjust my styling to ensure that the pdf has a complete background coverage. Any suggestions?

javascriptcssnode.jstypescriptpdf

Answer №1

Consider including margin values for top, bottom, and body elements

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

Answer №2

substitute the content of page{...} within @media print for

body {
        background-color: blue; 
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm experiencing an issue where the image is not rendering when I include a res.send statement in the next middleware function

I'm new to working with expressjs and I have a question about my app js file. When I remove the res.send function in the middleware called Aperson, the image is able to download properly. However, when I include the res.send function, the image fails ...

node.jsexpressmiddleware

Best practices for implementing the <head> tag in an Angular directive

After attempting the solution provided in this post for my Angular app, I ran into some issues. To try and resolve the problem, I decided to introduce a custom tag (<mytag>) into the head section, which allowed me to get the directive working by subs ...

javascriptangularjsangularjs-directive

Binding data in Angular 2 to an element other than an input

Angular 2 Version:rc.1 I have a table displaying names and places using *ngFor, and I need to bind the clicked cell's data to a variable in my component. component.html <tr *ngFor="let result of Results$"> <td #foo (click)="passValue(foo ...

typescriptangular

How do I adjust the controls in Three.js to align with the previous camera position?

The three.js scene is equipped with W,A,S,D and left and right arrow controls, which allow for movement of the camera. However, the controls restrict the camera's movement to a fixed direction in the scene, rather than relative to its previous positio ...

javascriptthree.js

Challenge with Filter Functionality when Activating Button

Can you help me implement a search filter using buttons with the Isotope Plugin? For example, entering a search value in an input field and then clicking a search button to display the search results. How can I achieve this using buttons? Below is the H ...

javascripthtmlcss

PHP code for sending email with attachment file

I have created an HTML form with the option to upload a file and send it to me via email. Additionally, I already have a PHP script that sends textbox values and text area values via email. Now, I would like the uploaded file from the form to be sent to m ...

phpjavascripthtmlformsemail

Having issues with Vue.js integration with Rails

My goal is to make an AJAX call to a Rails Controller in order to retrieve some data and then display it using Vue.js. However, for some reason, the request doesn't seem to be reaching the Controller. Can you help me figure out what I am doing wrong? ...

javascriptruby-on-railsrubyvue.js

What is the best way to detect when a user manually changes a dropdown selection?

Is there a way to detect when a user changes a dropdown option manually, rather than when the page loads and the default value is set? I attempted using e.originalEvent, but it didn't work as expected. $(self.options.selectChange).change(function (e ...

javascriptjqueryselectonchange

Presenting information with Jqgrid

I have a value stored in an array variable called item which contains the following: var item = JSON.stringify(product); cartproduct[cartproduct.length] = item; The item variable stores data like this: { "Product": "1001", "Brand": "Dell", "Model" ...

javascriptjson

Sharing or exporting a Mongo database connection in Node.js/Express: Best practices

I've been struggling to share the connection to my Mongo database with other modules in my Node.js project. Every time I try to use the exported client, I end up getting errors like either undefined or is not a function. Additionally, I'm unsure ...

node.jsmongodbexpress

Generate a dynamic add to cart section for every last configurable choice, assisting with this task

Currently, I am involved in a project that involves displaying configurable options on a product page, along with querying the database to check which vendors carry the product. The list of vendors is then displayed using JavaScript. In order to make the ...

phpjavascriptajaxmagento

Is it possible to increase the height beyond 100% in a flexbox flex-column class div?

Recently, I utilized Bootstrap to create a grid where one of the columns contains a grid of divs. Each div is designed to expand on hover and overlap surrounding ones. These divs are equipped with images and text. On mobile devices, there are 3 divs stack ...

htmlcsssassbootstrap-4flexbox

Error occurred in Flask due to request names being dynamically generated using JavaScript

My current project involves creating an app that calculates transit projections based on input years and other variables. I've written a JavaScript script where users can add new types of vehicles, each generating a unique div with specific ids and na ...

javascriptpythonajaxflask

Is there a way to handle templates in AngularJS that is reminiscent of Handlebars?

Is there a way to handle an AngularJS template using a syntax similar to Handlebar? <script type="text/ng-template" id="mytemplate"> Name is {{name}} </script> I know how to retrieve the template using $templateCache.get('mytemplate&ap ...

javascriptangularjstemplateshandlebars.js

Utilizing JavaScript/jQuery to activate a Bootstrap navbar post-page load

Having trouble triggering Bootstrap's navbar with plain JavaScript/jQuery while using Bootstrap 3.3.6 and jQuery 1.11.3. The data structure provided for my application cannot be modified in terms of adding classes or ids. <ul> <li ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilize the withCredentials property in conjunction with $resource

I am looking to utilize a resource with a cookie set in the navigator. Using $http makes it simple, just need to set withCredentials to true: $http({ method: 'POST', url: url, data: user, withCredentials: true }); However, for ...

javascriptangularjsangular-http

Angular is the best method for properly loading a webpage

Struggling to solve this issue. I have a webpage where I need to load another webpage, specifically a page from a different site, into a div. Essentially, it's like a news ticker that I want to showcase. The problem is that the URL is stored in a Mon ...

javascriptangularjsnode.js

Viewing the information stored in a text file hosted on a web server

I need help enhancing the functionality of a webpage on my server. Specifically, I want to display the contents of a text file saved on the server. I am struggling with the syntax, but it seems to involve using Flask along with HTML and JavaScript function ...

javascriptphphtmlflaskxmlhttprequest

Instructions for passing the chosen value to Django

I am struggling to set up a search button using Ajax and Django. I need to send the selected value to the server, but I can't seem to retrieve the value from the select HTML tag. The variable value always ends up empty ({"obj":""}). Any ideas? HTML : ...

javascriptjquerydjangoajaxdjango-3.0

Floating elements and Internet Explorer compatibility

In my code, I have two divs that are floating correctly in Chrome, Firefox, and Safari but not in Internet Explorer. In IE, the right div appears below the left div even though it should be floated to the right. Both of these divs are wrapped by an outer ...

htmlcss