<html>
<head>
<title>Abakada CSS Demo: backgroundPosition Property</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style type="text/css">
<!--
body {
background: url( "../shared/images/filtwiz.gif" )
no-repeat center }
-->
</style>
</head>
<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>Abakada CSS Demo: <span class="hilite">backgroundPosition</span> Property</h2></div>
<hr size=1 width=92%>
<div class="back">
<div style="font: bold 13pt; color: dimgray"
onmouseover="body.style.backgroundPosition='top right'"
onclick="body.style.backgroundPosition='bottom left'"
onmouseout="body.style.backgroundPosition='center'">
<p>This example uses inline event handlers to dynamically set an object's <b>backgroundPosition</b> style property. </p>
<p>The background image on the BODY is initially set at <i>center</i>. </p>
<p>Move the mouse over this text to set the image position to <i>top right</i>. </p>
<p>Click to move <i>bottom left</i>. Move the mouse out to reset. </p>
</div>
</div>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>