<html>
<head>
<title>Abakada CSS Demo: background-position Attribute</title>
<link href="../shared/demos_blk.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
background: url( "../shared/images/back.jpg" )
no-repeat center }
.topLeft {
background-position: "top left" }
.bottomRight {
background-position: "bottom right" }
-->
</style>
</head>
<body id="theBody">
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>Abakada CSS Demo: <span class="hilite">background-position</span> Attribute</h2></div>
<hr size=1 width=92%>
<center>
<div id="msg" onmouseover="theBody.className='topLeft'"
onclick="theBody.className='bottomRight'" onmouseout="theBody.className=''">
<p>This example uses calls to an embedded stylesheet to dynamically set an element's <b>background-position</b> style attribute. </p>
<p>The background image on the BODY is initially set at <i>center</i>. </p>
<p>Move the mouse over this text to apply a style class that sets the position of the image to <i>top left</i>. </p>
<p>Click to move <i>bottom right</i>. Move the mouse out to reset. </p>
</div>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>