CSS Background Position Property

Last Updated Jul 21, 2015, 12:00:06 PM

CSS Background Position Property

The CSS background-positionproperty sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

By default, a background image's initial position is the top left-hand corner of the containing element. We can control this position with the background-position property which accepts position keywords along with length units and percentages. The first value in background position determines the position in the x-axis or horizontal position. So, int below example we'll use the keyword "Center." which positions the image in the center of the containing element. Other x axis keywords are "left" and "right."

Definition and Usage

Initial Value	0% 0%
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	no
Percentages	refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
Media	Visual
Computed Value	a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a ), otherwise as a percentage
Animatable	Yes, as a color
Canonical Order	The unique non-ambiguous order defined by the formal grammer

Syntax
Values <position>

Is a <position>, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

Example
Watch GIF Try It Now