h1 with background image of different position : background position : Box Model HTML CSS TUTORIALS


HTML CSS TUTORIALS » Box Model » background position »

 

h1 with background image of different position


 
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 &amp; 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>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Box Model
» background position