1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
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>