Guides
PDFMonkey Features
Frequent questions
How-tos
How to force a single page or use a full-page background
Forcing content to fit on a single page
If you want to make a container that will always take an entire page, no more, no less, you can define it like so:
CSS
1
.page {
2
/* Defining an A4 portrait page */
3
height: 1120px;
4
width: 793px;
5
​
6
/* Will prevent any content like large images from messing */
7
/* with printed content auto-scaling */
8
overflow: hidden;
9
​
10
/* Will allow any absolutely positionned content to be */
11
/* placed relatilvely to the page by default */
12
position: relative;
13
}
Copied!
You can then use it in your HTML
HTML
1
<div class="page">
2
Content for a single page
3
</div>
Copied!
Using a full-page background
If you want to apply a background so it takes the entire page, use the technique above and set the background image on your page:
CSS
1
.page-with-bg {
2
background-image: url('some-background-url-or-datauri');
3
background-size: cover;
4
}
Copied!
HTML
1
<div class="page page-with-bg">
2
Content for a single page
3
</div>
Copied!
Copy link