background-attachment-005

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="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
 7   <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/background/block/001.html" type="text/html">
 8   <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background">
 9   <meta name="flags" content="image interact scroll">
10   <style type="text/css">
11    div {
12      background: red -5px -5px url(support/bordered-rectangle.png) scroll;
13      border: 10px dotted silver;
14      overflow: auto; height: 90px; width: 190px;
15      white-space: pre; font-size: 16px;
16    }
17    ul { color: navy; }
18   </style>
19  </head>
20  <body>
21 
22   <ul>
23    <li>There should be a gray dotted box below.</li>
24    <li>There should be a teal border underneath the dotted box.</li>
25    <li>The box should be painted aqua inside the border.</li>
26    <li>There should be no red.</li>
27    <li>As you scroll the element through the numbers, the aqua, teal, and gray colors should not change position.</li>
28   </ul>
29 
30   <div>   1
31    2
32    3
33    4
34    5
35    6
36    7
37    8
38    9
39   10
40   11
41   12
42   13
43   14
44   15
45   16
46   17
47   18
48   19
49   20  </div>
50  </body>
51 </html>