Adding two background-position tests

yeslogic · Sep 28, 2016 · 8e7f763 · 8e7f763
1 parent 6bb9fc0
commit 8e7f763
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 0 deletions.
diff --git a/layout/background-position-background-size-scaling-and-centering-001.htm b/layout/background-position-background-size-scaling-and-centering-001.htm
@@ -0,0 +1,31 @@
+<!DOCTYPE html><html>
+<head><title>using background-position and background-size to scale and center image</title>
+
+<link rel="help" href="http://www.princexml.com/forum/topic/2291/specify-a-page-filling-cover-image">
+
+<style type="text/css">
+p{ /* Explanatory text, removed from normal flow */
+  position: fixed;
+  left: 4%;
+  width: 30%;
+  z-index: 1;
+}
+.page_background{
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    background-image: url(../support/blue-rect-200x1200.png);
+    background-repeat: no-repeat;
+    background-size: auto 12cm;
+    background-position: center;
+}
+</style>
+</head>
+
+<body>
+
+    <p>There should be a blue rectangle horizontally and vertically centered on this page. It should be 12cm tall and 2cm wide.</p>
+    <div class="page_background"></div>
+
+</body>
+</html>
diff --git a/layout/background-position-background-size-scaling-and-centering-002.htm b/layout/background-position-background-size-scaling-and-centering-002.htm
@@ -0,0 +1,43 @@
+<!DOCTYPE html><html><head>
+
+<title>Page cover as background-image, scaled and centered with background</title>
+<style type="text/css">
+@page a5 {
+  size: A5 landscape;
+  margin: 0;
+}
+
+.a5{
+  page: a5;
+  margin: 0;
+  page-break-after: always;
+}
+.a5 div{
+  background-color: #ccc;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  position: absolute;
+  background-image: url(../support/blue-rect-200x1200.png);
+  background-repeat: no-repeat;
+  background-size: auto 75%;
+  background-position: center;
+}
+
+  .a5 p{
+    position: fixed;
+    left: 4%;
+    width: 30%;
+    z-index: 1;
+  }
+
+</style></head>
+<body>
+    <div class="a5">
+        <div><p>This page should be grey, with no margin. There should be a blue rectangle with white content centered vertically and horizontally. The rectangle should be 111mm tall and 18,5mm wide. This should be the first page of a two-page document.</p></div>
+    </div>
+    <div class="a5">
+        <p>This page should be white with no contents except for this paragraph.</p>
+    </div>
+</body>
+</html>