background-repeat-space-6-ref.html (1715B)
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: 192px; 13 height: 106px; 14 display: flex; 15 align-content: space-between; 16 flex-wrap: wrap; 17 } 18 .inner 19 { 20 height: 32px; 21 width: 64px; 22 background-image: url(support/aqua-yellow-32x32.png); 23 background-repeat: no-repeat; 24 background-size: 64px 32px; 25 } 26 .inner_gradient 27 { 28 height: 32px; 29 width: 64px; 30 background-image: linear-gradient(to top left, red, green); 31 background-repeat: no-repeat; 32 background-size: 64px 32px; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="outer"> 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 class="inner"></div> 45 <div class="inner"></div> 46 <div class="inner"></div> 47 </div> 48 <div class="outer"> 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 class="inner_gradient"></div> 56 <div class="inner_gradient"></div> 57 <div class="inner_gradient"></div> 58 </div> 59 </body> 60 </html>