background-bg-pos-205.xht (7153B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Background Position: bottom right and the scrolling viewport</title> 5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 6 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> 7 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/bg-pos-3.html" type="text/html"/> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background"/> 9 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> 10 <meta content="image scroll" name="flags" /> 11 <style type="text/css"> 12 html { background: bottom right url(support/swatch-orange.png) scroll white no-repeat; color: black; } 13 html, body { margin: 0; border: 0; padding: 0; } 14 p { margin-top: 0; margin-bottom: 2em; } 15 .inner { line-height: 3em; letter-spacing: 3em; color: silver; white-space: normal; margin: -5em; } 16 .platform { background: yellow; height: 3em; margin-right: 5em; } 17 .inner { background: bottom right url(support/swatch-blue.png) no-repeat; } 18 </style> 19 20 </head> 21 <body> 22 <p>Scroll to the bottom right of the page, where there should be 23 a single blue square tucked precisely into the corner. There must 24 also be a single orange square sitting on top of the large yellow box, 25 aligned exactly at its rightmost edge.</p> 26 27 <div class="inner">this is filler text this is filler text this is filler text this 28 is filler text this is filler text this is filler text this is filler 29 text this is filler text this is filler text this is filler text this 30 is filler text this is filler text this is filler text this is filler 31 text this is filler text this is filler text this is filler text this 32 is filler text this is filler text this is filler text this is filler 33 text this is filler text this is filler text this is filler text this 34 is filler text this is filler text this is filler text this is filler 35 text this is filler text this is filler text this is filler text this 36 is filler text this is filler text this is filler text this is filler 37 text this is filler text this is filler text this is filler text this 38 is filler text this is filler text this is filler text this is filler 39 text this is filler text this is filler text this is filler text this 40 is filler text this is filler text this is filler text this is filler 41 text this is filler text this is filler text this is filler text this 42 is filler text this is filler text this is filler text this is filler 43 text this is filler text this is filler text this is filler text this 44 is filler text this is filler text this is filler text this is filler 45 text this is filler text this is filler text this is filler text this 46 is filler text this is filler text this is filler text this is filler 47 text this is filler text this is filler text this is filler text this 48 is filler text this is filler text this is filler text this is filler 49 text this is filler text this is filler text this is filler text this 50 is filler text this is filler text this is filler text this is filler 51 text this is filler text this is filler text this is filler text this 52 is filler text this is filler text this is filler text this is filler 53 text this is filler text this is filler text this is filler text this 54 is filler text this is filler text this is filler text this is filler 55 text this is filler text this is filler text this is filler text this 56 is filler text this is filler text this is filler text this is filler 57 text this is filler text this is filler text this is filler text this 58 is filler text this is filler text this is filler text this is filler 59 text this is filler text this is filler text this is filler text this 60 is filler text this is filler text this is filler text this is filler 61 text this is filler text this is filler text this is filler text this 62 is filler text this is filler text this is filler text this is filler 63 text this is filler text this is filler text this is filler text this 64 is filler text this is filler text this is filler text this is filler 65 text this is filler text this is filler text this is filler text this 66 is filler text this is filler text this is filler text this is filler 67 text this is filler text this is filler text this is filler text this 68 is filler text this is filler text this is filler text this is filler 69 text this is filler text this is filler text this is filler text this 70 is filler text this is filler text this is filler text this is filler 71 text this is filler text this is filler text this is filler text this 72 is filler text this is filler text this is filler text this is filler 73 text this is filler text this is filler text this is filler text this 74 is filler text this is filler text this is filler text this is filler 75 text this is filler text this is filler text this is filler text this 76 is filler text this is filler text this is filler text this is filler 77 text this is filler text this is filler text this is filler text this 78 is filler text this is filler text this is filler text this is filler 79 text this is filler text this is filler text this is filler text this 80 is filler text this is filler text this is filler text this is filler 81 text this is filler text this is filler text this is filler text this 82 is filler text this is filler text this is filler text this is filler 83 text this is filler text this is filler text this is filler text this 84 is filler text this is filler text this is filler text this is filler 85 text this is filler text this is filler text this is filler text this 86 is filler text this is filler text this is filler text this is filler 87 text this is filler text this is filler text this is filler text this 88 is filler text this is filler text this is filler text this is filler 89 text this is filler text this is filler text this is filler text this 90 is filler text this is filler text this is filler text this is filler 91 text this is filler text this is filler text this is filler text this 92 is filler text this is filler text this is filler text this is filler 93 text this is filler text this is filler text this is filler text this 94 is filler text this is filler text this is filler text this is filler 95 text this is filler text this is filler text this is filler text this 96 is filler text this is filler text this is filler text this is filler 97 text this is filler text this is filler text this is filler text this 98 is filler text this is filler text this is filler text this is filler 99 text this is filler text this is filler text this is filler text this 100 is filler text this is filler text this is filler text this is filler 101 text this is filler text this is filler text this is filler text this 102 is filler text this is filler text this is filler text this is filler 103 text this is filler text this is filler text this is filler text this 104 is filler text this is filler text this is filler text this is filler 105 text this is filler text this is filler text this is filler text this 106 is filler text this is filler text this is filler text this is filler 107 text<div class="platform"></div><p></p> 108 </div></body> 109 </html>