CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES

CSS background-position Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The background-position CSS property sets the initial position (i.e. origin) of the element's background-image. It is often more convenient to use the shorthand background property.

The following table summarizes the usages context and the version history of this property.

Default value: 0% 0%
Applies to: All elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: CSS 1, 2, 3

Syntax

The syntax of the property is given with:

background-position: 
[ percentage | length | left | center | right ]1 or 2 values | initial | inherit

The example below shows the background-position property in action.

p {
    background-image: url("images/smiley.png");
    background-position: 50% center;
}

Note: If only one value is specified, the second value is assumed to be center. If two values are used, and at least one is not a keyword, the first value represents the horizontal position, and the second represents the vertical position.


Property Values

The following table describes the values of this property.

Value Description
bottom Equivalent to 100% for the vertical position.
center Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.
left Equivalent to 0% for the horizontal position.
right Equivalent to 100% for the horizontal position.
top Equivalent to 0% for the vertical position.
length Actual pixel lengths. For example, with a value pair of '10px 20px', the upper left corner of the image is placed 10px to the right and 20px below the upper left corner of the element's box.
percentage A percent of the element size. For example, with a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the element's box.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element background-position property.

Browser Compatibility

The background-position property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 3.5+

Further Reading

See tutorial on: CSS Background, CSS3 Background.

Related properties: background, background-attachment, background-color, background-clip, background-image, background-origin, background-repeat, background-size.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties