background-repeat-space-3.html (2094B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Background: background-repeat: background image round with specified position</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 <link rel="help" href="https://www.w3.org/TR/css3-background/#background-repeat"> 9 <link rel="match" href="background-repeat-space-3-ref.html"> 10 <meta name="assert" content="Test checks whether background-repeat: 'no-repeat space' and 'space no-repeat' works correctly or not."> 11 <meta name="fuzzy" content="maxDifference=0-52; totalPixels=0-5300"> 12 <style type="text/css"> 13 .outer { 14 width: 106px; 15 height: 106px; 16 border: 1px solid black; 17 } 18 .inner1 { 19 width: 106px; 20 height: 106px; 21 background-image: url(support/aqua-yellow-32x32.png); 22 background-repeat: space no-repeat; 23 background-position: 7px 40px; 24 } 25 .inner2 { 26 width: 106px; 27 height: 106px; 28 background-image: url(support/aqua-yellow-32x32.png); 29 background-repeat: no-repeat space; 30 background-position: 40px 7px; 31 } 32 .inner_gradient1 { 33 width: 106px; 34 height: 106px; 35 background-size: 32px 32px; 36 background-image: linear-gradient(to top left, red, green); 37 background-repeat: space no-repeat; 38 background-position: 7px 40px; 39 } 40 .inner_gradient2 { 41 width: 106px; 42 height: 106px; 43 background-size: 32px 32px; 44 background-image: linear-gradient(to top left, red, green); 45 background-repeat: no-repeat space; 46 background-position: 40px 7px; 47 } 48 </style> 49 </head> 50 <body> 51 <div class="outer"> 52 <div class="inner1"></div> 53 </div> 54 <div class="outer"> 55 <div class="inner2"></div> 56 </div> 57 <div class="outer"> 58 <div class="inner_gradient1"></div> 59 </div> 60 <div class="outer"> 61 <div class="inner_gradient2"></div> 62 </div> 63 </body> 64 </html>