Background-position Property

Using this property set the starting position of a background image like 

  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom

CSS Syntax→ background-position: top|left center| left bottom | right top| right center | right bottom| center top |center center | center bottom;

left top

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://nielitbhu.com/image.jpg');
background-position: left top;
background-repeat: no-repeat;
text-align: center;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<h2>background-position: left top;</h2>
</body>
</html>

left center

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://nielitbhu.com/image.jpg');
background-position: left center;
background-repeat: no-repeat;
text-align: center;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<h2>background-position: left center;</h2>
</body>
</html>

left bottom

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://nielitbhu.com/image.jpg');
background-position: left bottom;
background-repeat: no-repeat;
text-align: center;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<h2>background-position: left bottom;</h2>
</body>
</html>

right top

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://nielitbhu.com/image.jpg');
background-position: left center;
text-align: center;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<h2>background-position: right top ;</h2>
</body>
</html>

right center

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://nielitbhu.com/image.jpg');
background-position: right center;
text-align: center;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<h2>background-position: right center ;</h2>
</body>
</html>

right bottom

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://nielitbhu.com/image.jpg');
background-position: right bottom;
background-repeat: no-repeat;
text-align: center;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<h2>background-position: right bottom;</h2>
</body>
</html>

center top

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://nielitbhu.com/image.jpg');
background-position: center top;
text-align: center;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<h2>background-position: center top;</h2>
</body>
</html>

center center

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://nielitbhu.com/image.jpg');
background-position: center center;
text-align: center;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<h2>background-position: center center;</h2>
</body>
</html>

center bottom

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://nielitbhu.com/image.jpg');
background-position: center bottom;
text-align: center;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<h2>background-position: center bottom;</h2>
</body>
</html>
English Hindi