The background-position property is used specify the top and the left of the background image relative to the top and the left of the element box.
The possible values are.
| Properties | Description |
|---|
| <percentage> | |
| <length> | |
left | center | right | for horizontal direction |
top | center | bottom | for vertical direction |
For example
background-position : 30px 50px /* first value applies to horizontal direction,
second value apply to vertical direction*/
background-position : left bottom
background-position : 10% /* applies to both the vertical and horizontal direction.*/
snippet
<html>
<head>
<style>
p {margin: 10px}
body * {background-image: url(bg.jpg)}
</style>
</head>
<body style="background-image: url(image.png);background-position: 0px">
<p style="background-position: 0px"> Say it before it's too late.</p>
<p style="background-position: 10px"> Say it before it's too late.</p>
<p style="background-position: -10px 10%"> Say it before it's too late.</p>
<p style="background-position: 6% -6%"> Say it before it's too late.</p>
<p style="background-position: 6cm"> Say it before it's too late.</p>
</body>
</html>
