scroll-positioned-multiple-background-images.html (1151B)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: Scroll multiple background images that are positioned</title> 5 <link rel="author" title="Google" href="http://www.google.com/" /> 6 <link rel="match" href="reference/60x60-green-background.html"> 7 <link rel="help" href="http://www.w3.org/TR/css3-background/#layering"> 8 <meta name="flags" content="dom image scroll" /> 9 <meta name="assert" content="When multiple background images are positioned at (0px, 0px) and (0, 60px) of each 60px by 60px in a scrollable element, 10 and the element is scrolled to (0, 60px), only the second image is shown." /> 11 <style type="text/css"> 12 13 #container { 14 width: 200px; 15 height: 200px; 16 overflow: hidden; 17 } 18 19 #element-with-attachment-scroll { 20 width: 500px; 21 height: 500px; 22 background-image: url('/css/support/60x60-red.png'), url('support/60x60-green.png'); 23 background-position: 0 0, 0 60px; 24 background-repeat: no-repeat; 25 } 26 27 </style> 28 </head> 29 <body> 30 <div id="container"><div id="element-with-attachment-scroll"><br></div></div> 31 <script> 32 document.getElementById('container').scrollTop = 60; 33 </script> 34 </body> 35 </html>