added calculation for the @page

bleeds/css/bleeds.css

@@ -9,7 +9,7 @@
   --page-count: 0;
   /* bleed and cropmarks */
   /* amount of bleed */
-  --bleed: 1mm;
+  --bleed: 5mm;
   /* cropmark style */
   --cropmark-color: black;
   /* space between page and cropmarks */
@@ -21,10 +21,13 @@
 
   }
 
+  /* correct calculation for the @page */
+  /* @page width = width + bleed + bledd + trim + trim */
+  /* @page height = height + bleed + bledd + trim + trim */
 
 
 @page {
-  size: 100mm 140mm;
+  size: 140mm 180mm;
   /* margin: 0; */
 }
 

bleeds/css/interface.css

@@ -14,7 +14,7 @@
   
 
   /* test bleed */
-  --bleed: 0in;
+  /* --bleed: 0in; */
 }
 
 @media print {
@@ -87,11 +87,11 @@
 .pagedjs_margin-left, 
 .pagedjs_margin-right, 
 .pagedjs_margin-top {
-    background: rgba(0,0,0,0.2);
+    background: rgba(0,0,0,0);
 }
 
 .pagedjs_page  {
-    background: rgba(0,0,0,0.2);
+    background: rgba(0,0,0,0);
 }
 
 .pagedjs_page > .pagedjs_area > .pagedjs_page_content {

bleeds/css/main.css

 
 
-/* 
-@page {
-    size: 150mm 210mm;
-    margin: 2cm 1.8cm  4cm  3cm;
-}
-
-.page {
-    --bleed: 6mm;
-} */
-
-
-/* :root {
-    --bleed: 6pt;
-} */
-/* 
-section {
-    break-before: page;
-    font-size: 10px;
-}
-
-.cover {
-  page: cover;
-}
-
-@page cover {
-  background: lightskyblue;
-} */
-
-
-.pagedjs_page {
-    /* background: red; */
+img {
+    position: absolute;
+    top: -94px;
+    left: -94px;
+    z-index: -1;
+    width: calc(var(--width) + var(--bleed) + var(--bleed));
+    height: calc(var(--width) + var(--bleed) + var(--bleed));
+    opacity: 0.4;
 }
\ No newline at end of file

bleeds/static.html

@@ -10,7 +10,7 @@
   <link href="css/bleeds.css" rel="stylesheet">
 
   <style>
-  html {
+  /* html {
     font-size: 12px;
     line-height: 16px;
   }
@@ -18,7 +18,7 @@
     margin-top: 4px;
     line-height: 18px;
 
-  }
+  } */
     </style>
 
 </head>
@@ -126,6 +126,7 @@
 
             <div>
               <section class="cover" data-ref="778455a4-a98e-4217-9dcf-42ae62bf06af" data-break-before="page" data-page="cover"> 
+                <img src="https://source.unsplash.com/random" alt="">
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
@@ -136,6 +137,7 @@
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
+              
               </section>
             </div>
           </div>