Forcing a single page or use a full-page background

PDFMonkey.io Pricing Sign in Get started for FREE

Search…

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
.page {
  /* Defining an A4 portrait page */
  height: 1120px;
  width: 793px;
​
  /* Will prevent any content like large images from messing */
  /* with printed content auto-scaling */
  overflow: hidden;
​
  /* Will allow any absolutely positionned content to be */
  /* placed relatilvely to the page by default */
  position: relative;
}
You can then use it in your HTML
HTML
<div class="page">
  Content for a single page
</div>
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
.page-with-bg {
  background-image: url('some-background-url-or-datauri');
  background-size: cover;
}
HTML
<div class="page page-with-bg">
  Content for a single page
</div>

How-tos - Previous

Changing the size of the page and its margins

Next - Integrations

List of integrations

Last modified 2mo ago

Copy link

On this page

Forcing content to fit on a single page

Using a full-page background