Background-position
Image-position attribute is used to align the background image to left, right, top or center.
possible values background-position
right, left, top, center
When you write value pair as “0% 0%” then the Image is placed in the upper left corner of the box
Possible combinations of keywords and their interpretations (e.g.).
top left and left top same as same as 0% 0%
top, top center and center top as 50% 0%
right top and top right as 100% 0%
center and center center as 50% 50%
bottom left and left bottom as 0% 100%
bottom right and right bottom as 100% 100%
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-position: right top;
}
</style>
</head>
<body>
<h1>Sample of Background image position</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</body>
</html>