CSS background-position Property

CSS background-position Property

CSS Background Position 
The background-position property is used to specify the starting position for a background image or gradient 
Syntax -
background-position: value;
The possible value are given below -



left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

If only one keyword is specified, then the other value will be "center".

x% y%

A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image) The size of the image is the size given by background-size. 

valuepx valuepx

Offsets background image by a length given in pixels relative to the top left of the background positioning area 


Set this property to its default value. 



Longhand Background Position Property -

Inherits this property from its parent element.


In addition to the shorthand property above, one can also use the longhand background properties backgroundposition-x and background-position-y. 


These allow you to control the x or y positions separately. 

Now we will see Example -
Example – The background-position property - 
Output -
Example 2 - Specifying two values for background-position
Output -