HTML & CSS

background-position (CSS property)

    Adam Roberts
    Share

    Description

    The background-position property defines the initial position of a background-image. We can repeat the image from this position using the background-repeat property, which will cause the image to be repeated in both directions along the specified axis: see background-repeat.

    The background of an element is the area covered by the width and height of that element (whether those dimensions are set explicitly, or the content dictates them); it also includes the area covered by padding and borders. A background-color (or background-image) that’s applied to an element will appear beneath the foreground content of that element, and the area covered by the padding and border properties for the element. This coverage area is evident where an element has transparent (or dotted or dashed) borders, and the background is seen beneath the borders (or between the dots).

    Some area of the element must be visible so that the background-image is able to show through. If the element has no intrinsic height (defined either by its content or by its dimensions), there will be no space in which the background can be seen. Similarly, if an element contains only floated children that haven’t been cleared—see clear—there will be no background to show, as the element’s height will be zero.

    If no background-position has been specified, the image is placed at the default top-left position of the element (0,0), which is located within the top-left corner of the element, just inside the border at the outside edge of the padding box.

    The tiling and positioning of the background-image on inline elements isn’t defined in the CSS2.1 specification, but it might be addressed in future versions.

    Example

    This style rule places a background-image at a position that’s 100 pixels from the left and 200 pixels from the top of the element with ID “example” :

    #example{
  background-position: 100px 200px;
}

    This property accepts one or two length values, percentages, or keywords.

    If only one value is specified for background-position, the second value is assumed to be center. Where 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.

    A length value places the top-left corner of the background-image at the exact horizontal and vertical position specified.

    Note that when the background-position is defined with a percentage value, that position refers to both the element itself and the corresponding point on the background-image. For example, a background-image with background-position values of 50% 50% will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image. In the above case, this causes the image to be perfectly centered. This is an important point to grasp—using background-position isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.