background-image-row-collapsed-ref.html (1441B)
1 <!doctype html> 2 <style> 3 body { 4 --peek: LightGreen; 5 --border: transparent; 6 margin:0; 7 } 8 .bg { 9 background-color: var(--peek); 10 background-image: linear-gradient(45deg, orange 0px, orange 5px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 99%, blue 99%); 11 background-size: 200px 50px; 12 background-repeat: no-repeat; /* FF defaults to no-repeat, Chrome to repeat */ 13 } 14 main > * { 15 box-sizing: border-box; 16 } 17 .table { 18 width: 200px; 19 position: relative; 20 margin-top: 5px; 21 margin-left:5px; 22 } 23 .row { 24 width: 200px; 25 height: 50px; 26 } 27 .cell { 28 width: 50px; 29 height: 50px; 30 display: inline-block; 31 vertical-align: top; 32 } 33 .bigsquarecell { 34 width: 100px; 35 height: 100px; 36 display: inline-block; 37 vertical-align: top; 38 background-position-x: -50px; 39 } 40 .c2 { 41 background-position-x: -50px 42 } 43 .c3 { 44 background-position-x: -100px; 45 } 46 .c4 { 47 background-position-x: -150px; 48 } 49 .bottomrow > .cell { 50 margin-top: 5px; 51 } 52 </style> 53 <main> 54 <div class="table"> 55 <div class="row bg"></div> 56 <div><div class="cell firstcell bg"></div><div class="bigsquarecell bg"></div><div class="cell c4 bg"></div></div> 57 <div class="row bg"></div> 58 <div style="position:absolute;top:-5px;left:-5px;bottom:-5px;right:-5px;border: 10px solid var(--border)"></div> 59 </div> 60 </main>