background-repeat-space-3-ref.html (2070B)
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 .outer1 10 { 11 border: 1px solid black; 12 width: 106px; 13 height: 106px; 14 display: flex; 15 justify-content: space-between; 16 } 17 .inner1 18 { 19 height: 32px; 20 width: 32px; 21 background-image: url(support/aqua-yellow-32x32.png); 22 margin-top: 40px; 23 } 24 .outer2 25 { 26 border: 1px solid black; 27 width: 106px; 28 height: 106px; 29 display: flex; 30 align-content: space-between; 31 flex-wrap: wrap; 32 } 33 .inner2 34 { 35 height: 32px; 36 width: 32px; 37 background-image: url(support/aqua-yellow-32x32.png); 38 margin-left: 40px; 39 } 40 .inner_gradient1 41 { 42 height: 32px; 43 width: 32px; 44 background-size: 32px 32px; 45 background-image: linear-gradient(to top left, red, green); 46 margin-top: 40px; 47 } 48 .inner_gradient2 49 { 50 height: 32px; 51 width: 32px; 52 background-size: 32px 32px; 53 background-image: linear-gradient(to top left, red, green); 54 margin-left: 40px; 55 } 56 </style> 57 </head> 58 <body> 59 <div class="outer1"> 60 <div class="inner1"></div> 61 <div class="inner1"></div> 62 <div class="inner1"></div> 63 </div> 64 <div class="outer2"> 65 <div class="inner2"></div> 66 <div class="inner2"></div> 67 <div class="inner2"></div> 68 </div> 69 <div class="outer1"> 70 <div class="inner_gradient1"></div> 71 <div class="inner_gradient1"></div> 72 <div class="inner_gradient1"></div> 73 </div> 74 <div class="outer2"> 75 <div class="inner_gradient2"></div> 76 <div class="inner_gradient2"></div> 77 <div class="inner_gradient2"></div> 78 </div> 79 </body> 80 </html>