CSS background-position Property

Description

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

Initial value

0% 0%

Applies to

All elements

Inherited

No

Media

Visual

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

CSS Version

CSS1, CSS2, CSS3

JavaScript syntax

object.style.backgroundPosition

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

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

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

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
4	12	1	1	3.5	1
Tablets / Mobile
≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 20th October 2019