background-repeat-space-8-ref.html (963B)
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: 20px solid rgba(0, 0, 0, 0.5); 12 width: 106px; 13 height: 106px; 14 background-image: url(support/aqua-yellow-37x37.png); 15 background-repeat: repeat; 16 } 17 .outer_gradient 18 { 19 border: 20px solid rgba(0, 0, 0, 0.5); 20 width: 32px; 21 height: 32px; 22 background-size: 50px 50px; 23 background-image: linear-gradient(to top left, red, green); 24 background-repeat: no-repeat; 25 background-position: -10px -10px; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="outer"></div> 31 <div class="outer_gradient"></div> 32 </body> 33 </html>