CSS background-position Property

Description

The background-position CSS property is used to specify the starting position of a background image within its containing element. It allows web developers to control the alignment of the background image both horizontally and vertically. This property takes two values: the first value represents the horizontal position (left, center, or right), and the second value represents the vertical position (top, center, or bottom). For example, background-position: center top; would center the background image horizontally and align it to the top of the element. This property is particularly useful for achieving precise control over the placement of background images in web design, ensuring they are displayed exactly where intended on a webpage.

Initial value: 0% 0%
Applies to: All elements
Inherited: No
Computed value: A list, each item consisting of: a pair of offsets (horizontal and vertical) from the top left origin each given as a combination of an absolute length and a percentage
Animatable: Yes
JavaScript syntax: object.style.backgroundPosition

Interactive Demo

background-position: top;

background-position: left;

background-position: center;

background-position: 25% 75%;

background-position: bottom 50px right 100px;

Syntax

background-position: <position> [ , <position> ]*

Values

topComputes to '0%' for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.
rightComputes to '100%' for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.
bottomComputes to '100%' for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.
leftComputes to '0%' for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.
centerComputes to '50%' ('left 50%') for the horizontal position if the horizontal position is not otherwise specified, or '50%' ('top 50%') for the vertical position if it is.
<length>A length value gives a fixed length as the offset. For example, 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 background positioning area.
<percentage>A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by 'background-size'.

Example

HTML

<div style="height:1000px"> </div>

CSS

body { 
   background-image: url(images/icon1.png), url(images/icon2.png); 
   background-repeat: repeat-y, repeat-y; 
   background-position: left, right; 
}

Result

Editor