background-bg-pos-205

Background Position: bottom right and the scrolling viewport

WeasyPrint

This browser

Flags
image, scroll

Source

  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>