background-image-002.html (1195B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-break-3/#valdef-box-decoration-break-slice"> 4 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-image"> 5 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1200242"> 6 <link rel="match" href="background-image-002-ref.html"> 7 <style> 8 .container { 9 writing-mode: vertical-lr; 10 inline-size: 472px; 11 } 12 .mc { 13 columns: 3; 14 column-gap: 10px; 15 column-fill: auto; 16 block-size: 120px; 17 border: 1px solid; 18 margin-block-end: 20px; 19 background: yellow; 20 } 21 </style> 22 <div class="container"> 23 <div class="mc"> 24 <div style="block-size:350px; background:red url(../support/cat.png) left top;"></div> 25 </div> 26 <div class="mc"> 27 <div style="block-size:350px; background:red url(../support/cat.png) right top;"></div> 28 </div> 29 <div class="mc"> 30 <div style="block-size:350px; background:red url(../support/cat.png) left bottom;"></div> 31 </div> 32 <div class="mc"> 33 <div style="block-size:350px; background:red url(../support/cat.png) right bottom;"></div> 34 </div> 35 </div>