3 different background

named-page/named-page/named-page.html

@@ -23,15 +23,36 @@
         }
       }
 
-      .chapter {
-        page: chapter;
+      #chapter1 {
+        page: chapter1;
       }
 
-      @page chapter {
-        margin: 20mm 20mm;
+      @page chapter1 {
         background-color: yellow;
         @bottom-center{
-          content: "this is a chapter";
+          content: "this is chapter 1";
+        }
+      }
+
+      #chapter2 {
+        page: chapter2;
+      }
+
+      @page chapter2 {
+        background-color: red;
+        @bottom-center{
+          content: "this is chapter 2";
+        }
+      }
+
+      #chapter3 {
+        page: chapter3;
+      }
+
+      @page chapter3 {
+        background-color: green;
+        @bottom-center{
+          content: "this is chapter 3";
         }
       }
 
@@ -73,7 +94,7 @@
   </section>
 
 
-  <section class="chapter">
+  <section class="chapter" id="chapter1">
     <h1>Lorem ipsum dolor sit amet</h1>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non suscipit odio. Aenean ut ligula id mauris efficitur tincidunt vitae non leo. In convallis convallis leo, eget molestie metus imperdiet eu. Praesent pharetra, leo a laoreet mattis, ligula nisl commodo ante, non vestibulum nisi lacus eget magna. Maecenas scelerisque nibh ac felis egestas, egestas elementum risus pellentesque. Nulla iaculis ut leo a iaculis. Donec vel sodales dolor, vel fringilla elit. Vivamus aliquam diam eu maximus elementum. Integer eu urna at felis fermentum hendrerit.
@@ -91,7 +112,7 @@
       Donec odio lacus, maximus a ultrices non, pulvinar eget nunc. Morbi cursus eget enim eleifend tincidunt. In vel odio gravida, hendrerit diam ut, fringilla urna. Aenean sit amet nisi ut nisl placerat bibendum. Aenean consequat dapibus orci non accumsan. In imperdiet leo lectus, vitae euismod quam egestas et. Donec augue mauris, malesuada ac nunc dapibus, faucibus malesuada velit. Vivamus quis enim eget orci sollicitudin ultrices. Duis ut nulla velit. Donec feugiat quam nec sem cursus, vel feugiat nunc fringilla.
     </p>
   </section>
-  <section class="chapter">
+  <section class="chapter" id="chapter2">
     <h1>Praesent placerat lectus</h1>
     <p>
       Praesent placerat lectus ac mauris rhoncus, eget iaculis nisl molestie. Etiam posuere luctus ligula quis ornare. Duis semper lectus vel bibendum dapibus. Morbi a lacus eget augue sagittis euismod. Aliquam non leo quis dui bibendum viverra eu vel erat. Fusce iaculis vulputate leo, sit amet laoreet eros aliquam a. Sed id tellus at ligula porttitor pharetra. Morbi non fringilla augue. Cras sodales egestas mi, et porta orci ultricies sed. Sed et nulla a ligula aliquet accumsan non eleifend quam. Aliquam pellentesque, justo vel interdum accumsan, purus ipsum porttitor lectus, ac luctus risus lectus nec lectus. Cras ut augue condimentum, egestas nisi in, dictum erat. Nullam tincidunt tincidunt tempor. Sed in eleifend nibh, sit amet feugiat nisi. Cras at ante ut urna sagittis dictum ut nec elit.
@@ -106,7 +127,7 @@
       Etiam molestie sed orci sed suscipit. Donec ipsum est, venenatis ut nisl ut, viverra auctor diam. Cras vestibulum lacus vel nunc dapibus aliquam. Aliquam accumsan lorem rhoncus tortor rhoncus, ut euismod sapien ullamcorper. Vivamus et dictum lacus, eu pellentesque dolor. Suspendisse potenti. Mauris vitae volutpat odio. Duis vitae purus nec enim posuere efficitur at vitae nisl. Etiam enim nisl, rutrum in vestibulum nec, dapibus ut dui. Pellentesque imperdiet molestie ante quis feugiat. Sed nec felis congue, cursus ligula eget, bibendum est. Proin mattis, tortor non lobortis lobortis, nibh quam aliquam neque, sed tristique nibh ex aliquet felis. Phasellus non augue ac ante efficitur consectetur at at est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam dui enim, iaculis et felis ac, porta ullamcorper justo. Suspendisse potenti.
     </p>
   </section>
-  <section class="chapter">
+  <section class="chapter" id="chapter3">
     <h1>Aliquam eget massa loborti</h1>
     <p>
       Aliquam eget massa lobortis, maximus leo ac, iaculis quam. Sed non aliquet eros. Integer ultrices consequat tortor eget ullamcorper. Integer quis justo dignissim, porttitor urna sed, faucibus ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elit tortor, pharetra eu nisl vitae, placerat tempus lorem. Praesent rhoncus venenatis sodales. Cras tempor tempus lacus et pharetra. Phasellus at nulla sed ligula gravida hendrerit. Sed lorem tortor, consectetur id tempus eget, accumsan at eros.