CSS background-position Property

CSS background-position property sets the initial position of the background-image for an element.

CSS background-position property accept 3 different types of values:

  • Keywords (e.g. top center)
  • Length values (e.g. 15px 40px)
  • Percentages (e.g. 50% 35%)

Usages

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

Default value: 0% 0%
Applies to: All elements
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.backgroundPosition = "center"

Syntax

Here is a syntax for the CSS background-position property

background-position: position | initial | inherit;

Property Values

The following table describes the values of this property.

Value Description
position Specifies the image position
Value Description
left
right
top
bottom
center		 Specifies x coordinate (y coordinate value will be "center") to place an image relative to the edges of an element
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 Specifies x and y coordinate to place an image relative to the edges of an element
percentage Specifies x and y coordinate in percentage values to place an image relative to the edges of an element
length Specifies x and y coordinate in length (pixel) values to place an image relative to the edges of an element
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets background image position values.

.top {
  background-position: top;
}
.left_top {
  background-position: top left;
}
.percentage {
  background-position: 50% 35%;
}
.pixel {
  background-position: 15px 40px;
}

Run it...   »

Browser Compatibility

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

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.