background-attachment-004.xht (1406B)
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: 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(support/cat-128.png) no-repeat fixed center; } 12 .a { background: transparent url(support/cat-830.png) 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> 86