[css3-backgrounds] Percentage sizes and fixed backgrounds on the root element

In the testcase below, the fixed background on the root element has a percentage width (the original file included David Storey's name; I don't have the original link but credit goes to him fwiw):

<!doctype html>
<html class="bg">
   <head>
	<style type="text/css">
	   .bg {
		background: url("http://www.microsoft.com/favicon.ico");
	      background-attachment: fixed;
            background-position: 10% 10%;
		background-repeat: no-repeat;
		background-size: 50% auto;
		-moz-background-size: 50% auto;
		-webkit-background-size: 50% auto;
		-o-background-size: 50% auto;
            width: 250px;
            border: 5px dashed green;
            margin: 100px;
	   }
	</style>
   </head>
   <body>
   </body>
</html>

The question is whether the background sizing and positioning in this case is relative to the root element or to the viewport. Per CSS3 Backgrounds & Border 3.11 [1] :

"The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas, although any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.)"

In this case IE9, Firefox and WebKit use the viewport for both positioning and sizing. Opera seems to use the viewport for positioning but the root element for sizing.

In terms of which behavior makes the most sense, isn't the viewport the most logical positioning and sizing reference for fixed backgrounds in this case ? Otherwise, the background will move around as page content is added/removed. Also, if/when a 50-page document is paginated, should a fixed background on the root element with a 10% height be 5 pages tall ?

[1] http://www.w3.org/TR/css3-background/#special-backgrounds

Received on Tuesday, 8 February 2011 00:37:32 UTC