CSS background-position Property
The background-position property in CSS is mainly used to sets the initial position for the background image ie., it is used to set an image at a certain position. The position that is relative to the positioning layer, can be set by using the background-origin property.
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:
background-position: left top;: This property is used to set the image at the left top.
Example: This example illustrates the use of background-position property where the position value is set to the left top.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: left top; } </style></head> <body> </body></html> |
Output:
background-position: left center;: This property is used to set the image at the left center.
Example: This example illustrates the use of background-position property where the position value is set to the left center.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: left center; } </style></head><body></body></html> |
Output:
background-position: left bottom;: This property is used to set the image at the left bottom.
Example: This example illustrates the use of background-position property where the position value is set to the left bottom position.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: left bottom; } </style></head><body> </body></html> |
Output:
background-position: center top;: This property is used to set the image at the center top position.
Example: This example illustrates the use of background-position property where the position value is set to the center top position.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: center top; } </style></head><body> </body></html> |
Output:
background-position: center center;: This property is used to set the image at the center center position.
Example: This example illustrates the use of background-position property where the position value is set to the center center position.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: center center; } </style></head><body> </body></html> |
Output:
background-position: center bottom;: This property is used to set the image at the center bottom position.
Example: This example illustrates the use of background-position property where the position value is set to the center bottom position.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: center bottom; } </style></head><body> </body></html> |
Output:
background-position: right top;: This property is used to set the image at the right top position.
Example: This example illustrates the use of background-position property where the position value is set to the right top position.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: right top; } </style></head><body></body></html> |
Output:
background-position: right center;: This property is used to set the image at the right center position.
Example: This example illustrates the use of background-position property where the position value is set to the right center position.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: right center; } </style></head><body> </body></html> |
Output:
background-position: right bottom;: This property is used to set the image at the right bottom position.
Example: This example illustrates the use of background-position property where the position value is set to the right bottom position.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } </style></head><body> </body></html> |
Output:
background-position: 25% 75%;: This property is used to set the image at 25% from the left and 75% from the top.
Note: For x%y% notation, here x% denotes the horizontal position & y% denotes the vertical position with respect to the initial position i.e, left top.
Example: This example illustrates the use of background-position property where the position value is set in the form of a percentage.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: 25% 75&; } </style></head><body> </body></html> |
Output:
background-position: 30px 80px;: This property is used to set the image at the 30px from left and 80px from top.
Note: For x-pos y-pos notation, here the units are represented in pixels or any other CSS units.
Example: This example illustrates the use of background-position property where the position value is set in the form of pixels.
HTML
<!DOCTYPE html><html><head> <title> CSS | background-position Property </title> <style> body { background-image: url( background-repeat: no-repeat; background-attachment: fixed; background-position: 30px 80px; } </style></head><body> </body></html> |
Output:
Supported Browsers: The browser supported by the background-position property are listed below:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0
Please Login to comment...