background-attachment-006

Scrolling Backgrounds

WeasyPrint

This browser

Flags
image, interact, scroll

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html lang="en">
 3  <head>
 4   <title>CSS Test: Scrolling 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/block/001.html" type="text/html">
 7   <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background">
 8   <meta name="flags" content="image interact scroll">
 9   <style type="text/css">
10    .inner {
11      background: transparent -15px -15px url(support/swatch-teal.png) repeat-x scroll;
12      border: 10px dotted silver;
13      overflow: auto; height: 80px; width: 180px;
14      white-space: pre; font-size: 16px;
15      margin: -10px;
16    }
17    .outer {
18      border: 10px solid teal;
19      border-top-color: red;
20      background: aqua;
21      width: 180px;
22    }
23    ul { color: navy; }
24   </style>
25  </head>
26  <body>
27 
28   <ul>
29    <li>There should be a gray dotted box below.</li>
30    <li>There should be a teal border underneath the dotted box.</li>
31    <li>The box should be painted aqua inside the border.</li>
32    <li>There should be no red.</li>
33    <li>As you scroll the element through the numbers, the aqua, teal, and gray colors should not change position.</li>
34   </ul>
35 
36   <div class="outer">
37   <div class="inner">   1
38    2
39    3
40    4
41    5
42    6
43    7
44    8
45    9
46   10
47   11
48   12
49   13
50   14
51   15
52   16
53   17
54   18
55   19
56   20  </div>
57   </div>
58  </body>
59 </html>