The background-position property (CSS Reference)

Introduction

The background-position is used in conjunction with background-image. It defines the absolute position of the image. This property is useful if you set the background-repeat property to no-repeat. After that you can position your image anywhere you want.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head><title>background-position Demonstration</title>

body

{

background-image: url(http://topxml.com/images/topxml_site.gif);

background-repeat: no-repeat;

background-position: center;

}

</style>

</head>

<body>

</body>

</html>

Output

Values of the property

Name:

Description:

percentage

This value can be only used in a pair combination like “X Y”. The first value is horizontal and the second value is vertical. So “50% 50%” would mean the image is positioned in center. Alternatively you can also use “left center”. You can use any combination you like. Note that you have to use a space between the pair values.

length

This value is also used in a pair combination. The following values can be used:

cm (centimenter)

em (ems)

inch (inches)

mm (millimeters)

pc (picas)

px (pixels)

pt (points)

Again here you can also use the following keywords: left, right, top, bottom, center