background-repeat-space-1-ref.html (1858B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Background: background-repeat: position background image</title> 6 <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 8 <style type="text/css"> 9 .outer 10 { 11 border: 1px solid black; 12 width: 106px; 13 height: 106px; 14 display: flex; 15 justify-content: space-between; 16 align-content: space-between; 17 flex-wrap: wrap; 18 } 19 .inner 20 { 21 height: 32px; 22 width: 32px; 23 background-image: url(support/aqua-yellow-32x32.png); 24 } 25 .outer_gradient 26 { 27 border: 1px solid black; 28 width: 106px; 29 height: 106px; 30 display: flex; 31 justify-content: space-between; 32 align-content: space-between; 33 flex-wrap: wrap; 34 } 35 .inner_gradient 36 { 37 height: 32px; 38 width: 32px; 39 background-image: linear-gradient(to top left, red, green); 40 } 41 </style> 42 </head> 43 <body> 44 <div class="outer"> 45 <div class="inner"></div> 46 <div class="inner"></div> 47 <div class="inner"></div> 48 <div class="inner"></div> 49 <div class="inner"></div> 50 <div class="inner"></div> 51 <div class="inner"></div> 52 <div class="inner"></div> 53 <div class="inner"></div> 54 </div> 55 <div class="outer_gradient"> 56 <div class="inner_gradient"></div> 57 <div class="inner_gradient"></div> 58 <div class="inner_gradient"></div> 59 <div class="inner_gradient"></div> 60 <div class="inner_gradient"></div> 61 <div class="inner_gradient"></div> 62 <div class="inner_gradient"></div> 63 <div class="inner_gradient"></div> 64 <div class="inner_gradient"></div> 65 </div> 66 </body> 67 </html>