Table of Contents
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><!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>