background-image-row-ref.html (1631B)
1 <!doctype html> 2 <style> 3 body { 4 --peek: LightGreen; 5 } 6 .bg { 7 background-color: var(--peek); 8 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%); 9 background-size: 230px 50px; 10 background-repeat: no-repeat; /* FF defaults to no-repeat, Chrome to repeat */ 11 } 12 main > * { 13 box-sizing: border-box; 14 } 15 .table { 16 border: 10px solid yellow; 17 padding: 10px; 18 width: 290px; 19 } 20 .row { 21 margin-left: 10px; 22 margin-top: 10px; 23 width: 230px; 24 height: 50px; 25 } 26 .cell { 27 margin: 10px; 28 margin-right: 5px; 29 margin-left: 5px; 30 width: 50px; 31 height: 50px; 32 display: inline-block; 33 vertical-align: top; 34 } 35 .firstcell { 36 margin-left: 10px; 37 } 38 .bigsquarecell { 39 margin:10px; 40 margin-left: 5px; 41 margin-right: 5px; 42 margin-bottom: 5px; 43 width: 110px; 44 height: 110px; 45 display: inline-block; 46 vertical-align: top; 47 background-position-x: -60px; 48 } 49 .c2 { 50 background-position-x: -60px 51 } 52 .c3 { 53 background-position-x: -120px; 54 } 55 .c4 { 56 background-position-x: -180px; 57 } 58 .bottomrow > .cell { 59 margin-top: 5px; 60 } 61 </style> 62 <main> 63 <div class="table"> 64 <div class="row bg"></div> 65 <div><div class="cell firstcell bg"></div><div class="bigsquarecell bg"></div><div class="cell c4 bg"></div></div> 66 <div class="bottomrow"><div class="cell firstcell bg"></div><div class="cell c2 bg"></div><div class="cell c3 bg"></div><div class="cell c4 bg"></div> 67 </div> 68 </main>