2009-05-28 11:09:05 -07:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<title>background-size: 100% 100%; on body</title>
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
body
|
|
|
|
|
|
{
|
|
|
|
|
|
background-image: url(green-8x20-blue-8x20-vertical.png);
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
background-attachment: fixed;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
* This should not affect how the background paints, that is, how the
|
|
|
|
|
|
* background image is sized:
|
|
|
|
|
|
*
|
|
|
|
|
|
* If the ‘background-attachment’ value for this image is ‘fixed’ [...] the
|
|
|
|
|
|
* background positioning area is the initial containing block [CSS21].
|
|
|
|
|
|
*
|
|
|
|
|
|
* Thus '100% 100%' below is relative to the viewport size, so we expect to
|
|
|
|
|
|
* see a background which, modulo aliasing, is half green and half blue.
|
|
|
|
|
|
*/
|
|
|
|
|
|
height: 10000px;
|
|
|
|
|
|
|
2010-06-08 18:44:33 -07:00
|
|
|
|
background-size: 100% 100%;
|
2009-05-28 11:09:05 -07:00
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
