background-178

Background with (attachment position image color)

WeasyPrint

This browser

Flags
image, interact
Assertion
Background with (attachment position image color) sets the background to the image and the image scrolls with the element. The image is centered across the bottom and then tile out from there.

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 with (attachment position image color)</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background">
 7         <link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
 8         <meta name="flags" content="image interact">
 9         <meta name="assert" content="Background with (attachment position image color) sets the background to the image and the image scrolls with the element. The image is centered across the bottom and then tile out from there.">
10         <style type="text/css">
11             #div1
12             {
13                 height: 200px;
14                 width: 200px;
15                 overflow: scroll;
16             }
17             div div
18             {
19                 background: scroll bottom url("support/cat.png") green;
20                 width: 400px;
21                 height: 400px;
22             }
23         </style>
24     </head>
25     <body>
26         <p>Test passes if the box below is filled with cat images that move when the box is scrolled. Also, after scrolling to the bottom of the box, there is a cat image that is not cut off, and it is centered at the bottom of the box (there can be additional cat images).</p>
27         <div id="div1">
28             <div></div>
29         </div>
30     </body>
31 </html>