background-position: right bottom
The background-position: right bottom; property places the background image at the bottom-right corner of the element, aligning it with the element’s bottom and right edges.
Example: This example illustrates the use of background-position property where the position value is set to the right bottom position.
<!DOCTYPE html>
<html>
<head>
<title> CSS | background-position Property </title>
<style>
body {
background-image: url(
"https://media.w3wiki.org/wp-content/uploads/background-position1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
</style>
</head>
</html>
Output:
CSS background-position Property
The CSS background-position property sets the starting position of a background image. It can use keywords, percentages, or length values to precisely place the image within an element, allowing for customization of the visual layout and alignment of backgrounds.
Syntax:
background-position: value;
Note: The background-image is placed default to the top-left corner of an element with a repetition on both horizontally & vertically.
Property values:
Property | Description |
---|---|
background-position: left top; | This property sets the image at the left top position. |
background-position: left center; | This property sets the image at the left center position. |
background-position: left bottom; | This property sets the image at the left bottom position. |
background-position: center top; | This property sets the image at the center top position. |
background-position: center center; | This property sets the image at the center center position. |
background-position: center bottom; | This property sets the image at the center bottom position. |
background-position: right top; | This property sets the image at the right top position. |
background-position: right center; | This property sets the image at the right center position. |
background-position: right bottom; | This property sets the image at the right bottom position. |
background-position: 25% 75%; | This property sets the image at 25% from the left and 75% from the top. |
background-position: 30px 80px; | This property sets the image at 30px from the left and 80px from the top. |
Table of Content
- background-position: left top
- background-position: left center
- background-position: left bottom
- background-position: center top
- background-position: center center
- background-position: center bottom
- background-position: right top
- background-position: right center
- background-position: right bottom
- background-position: X% Y%
- background-position: Xpx Ypx
we will see each CSS background-position Property with their examples: