background-repeat-space-5-ref.html (1604B)
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: 96px; 14 display: flex; 15 justify-content: space-between; 16 flex-wrap: wrap; 17 } 18 .inner 19 { 20 height: 32px; 21 width: 32px; 22 background-image: url(support/aqua-yellow-32x32.png); 23 } 24 .inner_gradient 25 { 26 height: 32px; 27 width: 32px; 28 background-size: 32px 32px; 29 background-image: linear-gradient(to top left, red, green); 30 } 31 </style> 32 </head> 33 <body> 34 <div class="outer"> 35 <div class="inner"></div> 36 <div class="inner"></div> 37 <div class="inner"></div> 38 <div class="inner"></div> 39 <div class="inner"></div> 40 <div class="inner"></div> 41 <div class="inner"></div> 42 <div class="inner"></div> 43 <div class="inner"></div> 44 </div> 45 <div class="outer"> 46 <div class="inner_gradient"></div> 47 <div class="inner_gradient"></div> 48 <div class="inner_gradient"></div> 49 <div class="inner_gradient"></div> 50 <div class="inner_gradient"></div> 51 <div class="inner_gradient"></div> 52 <div class="inner_gradient"></div> 53 <div class="inner_gradient"></div> 54 <div class="inner_gradient"></div> 55 </div> 56 </body> 57 </html>