In this section, we will learn what the background-position property is and how to use it in CSS.
Click here to run the example of background-position property.
CSS background-position Property Definition and Usage
When we set an image for the background of an element, by default, the image’s Left-Top corner matches the element’s Left-Top corner and from that point, the rest of the image will be placed in the element’s background space.
But CSS provides a property named `background-position` by which we can change the default placement of an image that is going to be used for the background of an element.
Note: the value for `background-repeat` property should be set to “no-repeat” or “repeat-x” or “repeat-y” in order for the `background-position` to work.
CSS background-position Property Syntax
background-position: horizontal-position vertical-position;
CSS background-position Property Value
- The first value we set for this property specifies the horizontal location of the background-image to be placed.
- The second value specifies the vertical location of the background-image to be placed.
Here’s the list of values (keywords) that can be set for `background-position`:
|
First value (horizontal) |
Second value (vertical) |
|
Left |
Top |
|
Center |
Center |
|
Right |
Bottom |
The image below shows the result of using these keywords together:
Note: if we only set one keyword for this property, depending on the category of that keyword, the background image will be vertically or horizontally centered.
For example, if the value is “left” (which is belong to horizontal category) thus it means the image is horizontally on the left side so the vertical position is the default one which is “center”. Or if the value is “top” (which belongs to vertical category) it means the vertical position of the image is top and so the horizontal position of the image is set to default, which is the center.
Other than using keywords, we can also use numbers as the value for `background-position` property.
The first number we set for this property specifies the horizontal position and the second value specifies the vertical position of the image in the background of an element.
Any CSS supported unit can be used with these numbers.
Note: As the picture below shows, 0 0 is equal to top left corner of the element:
Note: if we set only one number value for `background-position` it will be used for both vertical and horizontal positions of the background image.
Example: background image CSS no repeat
See the Pen background image CSS no repeat by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS background-position Property Work?
As mentioned before, background-position property is used to set the position of an image that is set for an element. Now in the example above, we’ve used keywords like center, top, right, left etc. to change the position of images in the elements.
Example: center background image in CSS
See the Pen center background image in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
Example: CSS background image position
See the Pen CSS background image position by Enjoy Tutorials (@enjoytutorials) on CodePen.
