c536-bgpos-001.xht (3314B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: background-position</title> 5 <meta name="flags" content="ahem image" /> 6 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#background-position"/> 7 <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/> 8 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 9 <link rel="reviewer" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-29 --> 10 <link rel="match" href="c536-bgpos-001-ref.xht" /> 11 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 <style type="text/css"><![CDATA[ 14 html,body,div { margin: 0; border: 0; padding: 0; } 15 div { font: 15px/1 Ahem; color: white; width: 11em; } 16 17 /* tests */ 18 .four {background-image: url(support/swatch-red.png); background-position: 100% 100%; 19 background-repeat: no-repeat;} 20 .five {background-image: url(support/swatch-red.png); background-position: 0% 50%; 21 background-repeat: no-repeat;} 22 .six {background-image: url(support/swatch-red.png); background-position: 80% 25%; 23 background-repeat: no-repeat;} 24 .seven {background-image: url(support/swatch-red.png); background-position: 30px 30px; 25 background-repeat: no-repeat;} 26 ]]></style> 27 <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" title="14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'"/> 28 </head> 29 <body> 30 <p>There should be no red on this page.</p> 31 <div class="four"> 32             33             34             35             36           X 37 </div> 38 <div class="five"> 39             40             41 X           42             43             44 </div> 45 <div class="six"> 46             47         X   48             49             50             51 </div> 52 <div class="seven"> 53             54             55   X         56             57             58 </div> 59 </body> 60 </html>