|
Positioning Backgrounds
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Positioning Backgrounds</title>
<style type="text/css">
h1 {
font: 24px Verdana, Arial, Helvetica, sans-serif;
margin: 20px;
padding: 35px;
border: 2px solid;
}
h1.topLeft {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: top left;
}
h1.topRight {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: top right;
}
h1.centerCenter {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: center center;
}
h1.rightCenter {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: right center;
}
h1.bottomLeft {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom left;
}
h1.bottomCenter {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom center;
}
h1.bottomRight {
background-image: url(position-test.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
</style>
</head>
<body>
<h1>pristine & clean</h1>
<h1 class="topLeft">top left</h1>
<h1 class="topRight">top right</h1>
<h1 class="centerCenter">center center</h1>
<h1 class="rightCenter">right center</h1>
<h1 class="bottomLeft">bottom left</h1>
<h1 class="bottomCenter">bottom center</h1>
<h1 class="bottomRight">bottom right</h1>
</body>
</html>
|