CSS background-position

Please Share On:

Definition:

CSS background-position sets the starting point of the background elements.

Property Values are:

background-position:
center
left
right
center top
center center
center bottom
left top
left center
left bottom
right top
right center
right bottom

Syntax:

background-position: center;
background-position: left;
background-position: right;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;

Let’s use the following image to set as a background-position above each property value for example.

Let’s have a look in detail by applying each background-position.

Here is an image that I am going to use for each background-position value listed above.

1) background-position: center;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: center;
}

.text{
   padding-top: 100px;
}

</style>
</head>
<body>

<div id="background-position">
<h3>background-position: center;</h3>
  <p class="text"> Here is an example of image with background-position's property value is center.</p>
</div>

</body>
</html>

Result:



2. background-position:left;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: left;
}

.text{
padding-left: 80px;
}

</style>
</head>
<body>

<div id="background-position">
<h3>background-position: left;</h3>
  <p class="text"> Here is an example of background-position with property value left.</p>
</div>

</body>
</html>

Result:


3. background-position: right;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: right;
}

.text{
padding-right: 80px;
}

</style>
</head>
<body>

<div id="background-position">
<h3>background-position: right;</h3>
  <p class="text"> Here is an example of background-position with property value right.</p>
</div>

</body>
</html>

Result:



4. background-position: center top;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: center top;
}

.text{
padding-top: 10px;
}

</style>
</head>
<body>

<div id="background-position">
<h3>background-position: center top;</h3>
  <p class="text"> Here is an example of background-position with property value center top.</p>
</div>

</body>
</html>

Result:


5. background-position: center center;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: center center;
}

.text{
padding-top: 100px;
}

</style>
</head>
<body>

<div id="background-position">
<h3>background-position: center center;</h3>
  <p class="text"> Here is an example of background-position with property value center center.</p>
</div>

</body>
</html>

Result:


6. background-position: center bottom

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: center bottom;
}

.text{
padding-bottom: 10px;
}

</style>
</head>
<body>

<div id="background-position">
<h3>background-position: center bottom;</h3>
  <p class="text"> Here is an example of background-position with property value center bottom.</p>
</div>

</body>
</html>

Result:


7. background-position: left top;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: left top;
}
.heading
{
padding-left: 80px;
}

.text{
padding-top: 10px;
}

</style>
</head>
<body>

<div id="background-position">
<h3 class="heading">background-position: left top;</h3>
  <p class="text"> Here is an example of background-position with property value left top.</p>
</div>

</body>
</html>

Result:


8. background-position: left center;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: left center;
}
.heading
{
padding-left: 80px;
}

.text{
padding-left: 80px;
}

</style>
</head>
<body>

<div id="background-position">
<h3 class="heading">background-position: left center;</h3>
  <p class="text"> Here is an example of background-position with property value left center.</p>
</div>

</body>
</html>

Result:


9. background-position: left bottom;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: left bottom;
}
.heading
{
padding-left: 80px;
}

.text{
padding-left: 80px;
}

</style>
</head>
<body>

<div id="background-position">
<h3 class="heading">background-position: left bottom;</h3>
  <p class="text"> Here is an example of background-position with property value left bottom.</p>
</div>

</body>
</html>

Result:


10. background-position: right top;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: right top;
}
.heading
{
padding-right: 80px;
}

.text{
padding-right: 80px;
}

</style>
</head>
<body>

<div id="background-position">
<h3 class="heading">background-position: right top;</h3>
  <p class="text"> Here is an example of background-position with property value right top.</p>
</div>

</body>
</html>

Result:


11. background-position: right center;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: right center;
}
.heading
{
padding-right: 80px;
}

.text{
padding-right: 80px;
}

</style>
</head>
<body>

<div id="background-position">
<h3 class="heading">background-position: right center;</h3>
  <p class="text"> Here is an example of background-position with property value right center.</p>
</div>

</body>
</html>

Result:


12. background-position: right bottom;

<!DOCTYPE html>
<html>
<head>
<style>
#background-position{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: right bottom;
}
.heading
{
padding-right: 80px;
}

.text{
padding-right: 80px;
}

</style>
</head>
<body>

<div id="background-position">
<h3 class="heading">background-position: right bottom;</h3>
  <p class="text"> Here is an example of background-position with property value right bottom.</p>
</div>

</body>
</html>

Result:


Donate to support writers.



You may interest on the following topics:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial