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: Fixed Transparent Backgrounds</title>
5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/bgafixed.html" type="text/html">
7 <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background">
8 <meta name="flags" content="interact">
9 <style type="text/css">
10 * { background: transparent; }
11 body { background: transparent url(http://www.hixie.ch/resources/images/astrophy/128) no-repeat fixed center; }
12 .a { background: transparent url(http://www.hixie.ch/resources/images/astrophy/830) no-repeat fixed center; height: 100px; }
13 pre { font: 100 24px/2 Arial, sans-serif; letter-spacing: 1em; word-spacing: 1.2em; margin: 1em; }
14 </style>
15 </head>
16 <body>
17
18 <pre>
19
20 As you
21
22 scroll
23
24 this
25 page
26
27 down, you
28 should
29
30 see the
31
32 mow mow
33
34 get
35 bigger
36
37 in flashes.
38
39 </pre>
40
41 <div class="a"></div>
42
43 <pre>
44
45 The first
46
47 such flash
48
49 appears
50 just
51 above the second
52
53 sentence.
54
55 </pre>
56
57 <div class="a"></div>
58
59 <pre>
60
61 In fact, there is
62
63 a
64
65 flash
66 between each
67
68 sentence.
69
70 </pre>
71
72 <div class="a"></div>
73
74 <pre>
75
76 The flashes are
77
78 div elements
79 with
80 fixed backgrounds.
81
82 </pre>
83
84 </body>
85 </html>