background-position-three-four-values.html (1078B)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 5 <title>CSS Test: 'Background-position' with three and four values</title> 6 <link rel="help" href="http://www.w3.org/TR/css3-background/#background-position" /> 7 <meta name="assert" content="If three or four values are given to 'background-position', then each percentage or length value represents an offset from the edge specified by the preceeding keyword." /> 8 <link rel="match" href="reference/background-position-three-four-values-ref.html"> 9 <style type="text/css"> 10 div { 11 width: 200px; 12 height: 200px; 13 border: 2px solid black; 14 background-image: url("support/blue_color.png"); 15 background-repeat: no-repeat; 16 display: inline-block; 17 } 18 .test1 { 19 background-position: left 50px center; 20 } 21 .test2 { 22 background-position: right 25px top 75%; 23 } 24 .test3 { 25 background-position: left 25px bottom 75%; 26 } 27 .test4 { 28 background-position: right 25px bottom 25%; 29 } 30 </style> 31 32 </head> 33 <body> 34 35 <div class="test1"></div> 36 <div class="test2"></div> 37 <div class="test3"></div> 38 <div class="test4"></div> 39 40 </body> 41 </html>