The body has the QuirksMode logo as background; the test div has the inverted logo as background. Both are fixed.

The div has a percentual margin, which means it resizes when you resize the window. Do so. You'll see that the test div takes another position, and that another part of its background image becomes visible. Since the two background images overlap fully, it seems as if the logo is inverted in the div.

You won't see the effect in Explorer Windows 6-.


body {
	background-image: url('../../pix/logo_quirksmode.gif');
	background-attachment: fixed;
	background-repeat: repeat-x;
	margin: 0 10%;
	width: 80%;

div#test {
	background-image: url('../../pix/logo_quirksmode_inverted.gif');
	background-attachment: fixed;
	background-repeat: repeat-x;
	margin-left: 40%;
	margin-right: 10%;
	height: 50px;
	color: #ffffff;
	font-weight: 600;
	padding-left: 20px;