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
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.

Watch GIF Try It Now

CSS Background Position Property Left Example

Watch GIF Try It Now

CSS Background Position Property Right Example

Watch GIF Try It Now
Browser compatibility
Basic support 1.0 1.0 (85) 1.0 (1.7 or earlier) 3.5 4.0 (Yes) (Yes)
Multiple backgrounds 1.0 1.3 (312) 3.6 (1.9.2) 10.5 9.0 ? ?

Practice with Our Interactive Live Editors and Take your CSS Skills to the next level

Example 1 Example 2

Other CSS Background Properties you might want to Learn

CSS Background Color Properties

CSS Background Image Property

CSS Background Repeat Property

CSS Background Properties

Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

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