1. Computing

Discuss in my forum

background-position

By

background-position Description:

The background-position property defines the x and y (horizontal and vertical) position of the background image.

background-position in CSS Versions:

background-position Syntax:

background-position: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right] | inherit

  • percentage
    A percent of the element size.
  • length
    Actual pixel lengths.
  • top
    The top of the element.
  • center
    The horizontal (first position) or vertical (second position) center of the element.
  • bottom
    The bottom of the element.
  • left
    The left side of the element.
  • right
    The right side of the element.
  • inherit
    The element should have the same background-position setting as the parent.

background-position Initial Value:

0% 0%

background-position Applies To:

background-position Inheritance:

This property is not inherited.

background-position Browser Support:

background-position Examples:

specified by length

<p style="background-position : 10px 20px; background-image : /library/graphics/purple.gif;">
 This paragraph has the purple.gif image as a background that starts tiling at 10px over and 20px down from the upper left corner.
 </p>

background-position Special Notes:

  • The background-position property only reliably works in the <body> tag in many browsers.
  • This style requires a background image set.

Keywords have meanings that are based on the percentages:

  • 'top left' and 'left top' both mean the same as '0% 0%'.
  • 'top', 'top center' and 'center top' mean the same as '50% 0%'.
  • 'right top' and 'top right' mean the same as '100% 0%'.
  • 'left', 'left center' and 'center left' mean the same as '0% 50%'.
  • 'center' and 'center center' mean the same as '50% 50%'.
  • 'right', 'right center' and 'center right' mean the same as '100% 50%'.
  • 'bottom left' and 'left bottom' mean the same as '0% 100%'.
  • 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
  • 'bottom right' and 'right bottom' mean the same as '100% 100%'.

More background-position Information

Return to the Style Library

©2014 About.com. All rights reserved.