1.1 KiB
title |
---|
Background Position Property |
Background Position Property
The background-property sets the position from where the background image should start. In other words, this property will take an x-value and a y-value and will start the image from the point (x, y)
.
Example:
/* setting background-image of HTML doc */
body {
background-image: url('https://i.imgur.com/6Z2VStD.png');
background-repeat: no-repeat;
background-position: right top;
}
By default, background-position property is set to 0% 0%
.
Property values:
background-position: x-value y-value
where,
x-value: left | center | right | x% | x px
, and
y-value: top | center | bottom | y% | y px
.
Other permitted property values are initial
and inherit
.
initial
: Sets this property to its default value.
inherit
: Inherits the value from parent element.
Note: When only one value is given to background-property then the other is, by default, set to center
.
Other Resources:
MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position