page-background-005-print-ref.html (1819B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 @page { 5 size: 600px 300px; 6 margin: 20px; 7 } 8 :root { 9 print-color-adjust: exact; 10 } 11 body { 12 margin: 0; 13 } 14 .text { 15 /* Add some padding to leave some room for glyph overflow. 16 The page area may clip overflow, although the ref doesn't. */ 17 padding: 0 5px; 18 background: #ddd; 19 } 20 .pagecontainer { 21 break-before: page; 22 } 23 .pageborder { 24 box-sizing: border-box; 25 height: 260px; 26 border: 20px solid blue; 27 padding: 20px; 28 } 29 .cat { 30 position: absolute; 31 z-index: -1; 32 width: 100px; 33 height: 100px; 34 background-image: url(support/cat.png); 35 background-repeat: no-repeat; 36 } 37 </style> 38 <div class="pagecontainer"> 39 <div class="cat"></div> 40 <div class="pageborder"> 41 <div style="height:100px;"></div> 42 <div class="text"> 43 There should be a cat in the top left corner, flush with the border 44 edge. The blue border should be painted on top of the cat. 45 </div> 46 </div> 47 </div> 48 <div class="pagecontainer"> 49 <div class="cat" style="margin-top:20px; margin-left:20px;"></div> 50 <div class="pageborder"> 51 <div style="height:100px;"></div> 52 <div class="text"> 53 There should be a cat in the top left corner, flush with the padding box, 54 i.e. just inside the blue border. 55 </div> 56 </div> 57 </div> 58 <div class="pagecontainer"> 59 <div class="cat" style="margin-top:40px; margin-left:40px;"></div> 60 <div class="pageborder"> 61 <div style="margin-left:105px; width:10px; height:100px; background:orange;"></div> 62 <div class="text"> 63 There should be a cat in the top left corner, flush with the content box 64 (left-aligned with this box, vertically aligned with the orange bar). 65 </div> 66 </div> 67 </div>