background-image-column-ref.html (1510B)
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 10px, 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 220px, blue 220px); 9 background-repeat: no-repeat; 10 background-size: 50px 230px; 11 } 12 main * { 13 box-sizing: border-box; 14 } 15 .td { 16 width: 50px; 17 height: 50px; 18 position:absolute; 19 border: 4px solid black; 20 } 21 </style> 22 23 <main> 24 <div style="position: relative;border: 10px solid yellow; width:290px; height: 290px"> 25 <!-- row 1 --> 26 <div class="td bg" style="top:20px;left:20px;height:230px"></div> 27 <div class="td bg" style="top:20px;left:80px;"></div> 28 <div class="td" style="top:20px; left: 140px;"></div> 29 <div class="td" style="top:20px; left: 200px;"></div> 30 <!-- row 2 31 additional -4 offsets on background-position are for borders. 32 columns do not have borders. 33 --> 34 <div class="td bg" style="top:80px;left:80px;width:110px;height:110px;background-position-y:-64px;background-position-x:-4px"></div> 35 <div class="td" style="top:80px; left: 200px;"></div> 36 <!-- row 3 --> 37 <div class="td" style="top:140px; left: 200px;"></div> 38 <!-- row 4 --> 39 <div class="td bg" style="top:200px;left:80px;background-position-y:-180px"></div> 40 <div class="td" style="top:200px; left: 140px;"></div> 41 <div class="td" style="top:200px; left: 200px;"></div> 42 </div> 43 44 </main>