background-position

Table of contents

  1. 1. Summary
  2. 2. Syntax
    1. 2.1. Values
  3. 3. Examples
  4. 4. Specifications
  5. 5. Browser compatibility
  6. 6. See also
Page Notifications Off

« CSS « CSS Reference

Summary

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

If the value of this property is not set in a background shorthand property that is applied to the element after the background-position CSS property, the value of this property is then reset to its initial value by the shorthand property.
  • Initial value : 0% 0%
  • Applies to: all elements
  • Inherited : no
  • Percentages: refer to the size of the background position layer, minus the size of the image
  • Media: visual
  • Computed value : If one or two values are specified, for a <length> the absolute length, otherwise a percentage.
    If three or four values are specified, two pairs of a keyword plus a length or percentage.

Syntax

background-position:  <bg-position>[, <bg-position>]*
background-position:  [ <percentage>
| 
<length>
| left | center | right  ] 
                      [ <percentage> | <length> | top  | center | bottom ]?

background-position:  [ top | center | bottom ]

background-position:  inherit

Where:

<bg-position> is one of:
[ <percentage> | <length> | left | center | right  ]
                      [ <percentage> | <length> | top  | center | bottom ]?
[ top | center | bottom ]
inherit

Values

Accepts one or two values, up to four values in supporting browsers. Negative <percentage> and <length> values are allowed.

  • If only one value is specified, the second value is assumed to be center.
  • The first value represents the horizontal position and the second represents the vertical position (if at least one value is not a keyword).

The specifications allow for 4 values enabling offsetting a background image from any corner, not just the top left. If four values are specified, they must include two sides and two offsets. This is not yet fully supported in all browsers.

<percentage>
With a value pair of 0% 0%, (is equal to 0 0) the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of padding area. With a value pair of 14% 84%, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
<length>
With a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
top
Equivalent to 0% for the vertical position.
right
Equivalent to 100% for the horizontal position.
bottom
Equivalent to 100% for the vertical position.
left
Equivalent to 0% for the horizontal position.
center
Equivalent to 50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.

Examples

View the live example 

.exampleone {
	background-image: url("logo.png");
	background-position: top;
}

.exampletwo {
	background-image: url("logo.png");
	background-position: 25% 75%;
}

.examplethree {
	background: url("logo.png") 2cm bottom;
}

.examplefour {
	background-image: url("logo.png");
	background-position: center 10%;
}

.examplefive {
	background: url("logo.png") 3em 50%;
}

.examplesix {
	background-image: url("logo.png");
	background-position: right 20px bottom 20px;
}
	
.exampleseven { /* Multiple background images: Each image is matched with the corresponding position style, 
                   from first specified to last. */
  background-image: url("img1.png"), url("img2.png");
  background-position: 0px 0px, center;
}

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation Added support for multiple backgrounds, the four-value syntax and modified the percentage definition to match implementations.
CSS 2.1 Recommendation Allows for the mix of keyword values and <length> and <percentage> values.
CSS 1 Recommendation  

Browser compatibility

  • Desktop
  • Mobile

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
Four values syntax -- WebKit bug 37514 13.0 (13.0) 9.0 10.5 -- WebKit bug 37514
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1) (Yes) (Yes) (Yes)
Multiple backgrounds ? 1.0 (1.9.2) ? ? ?
Four values syntax -- 13.0 (13.0) ? ? --

Tags (3)

Edit tags

Attachments (0)

 

Attach file