background-position - HTML CSS CSS Property

Description

The background-position CSS property controls the origin of the element's background-image.

The following table summarizes the background-position property.

Item	Value
Default value:	0% 0%
Applies to:	All elements
Inherited:	No
Animatable:	Yes.

Syntax

The syntax of the property is as follows:

background-position:[ percentage | length | left | center | right ] | initial | inherit

If only one value is specified, the second value is assumed to be center.

If two values are used, the first value is the horizontal position, and the second is the vertical position.

Property Values

The following table describes the values of this property.

Value	Description
bottom	100% for the vertical position.
center	50% for the horizontal position if it is not otherwise given, or 50% for the vertical position if it is.
left	0% for the horizontal position.
right	100% for the horizontal position.
top	0% for the vertical position.
length	Actual pixel lengths. For example, with a value pair of '10px 20px', the upper left corner of the image is placed 10px to the right and 20px below the upper left corner of the element's box.
percentage	A percent of the element size. For example, with a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the element's box.
initial	Sets this property to its default value.
inherit	takes the value of its parent element background-position property.

The example below shows the background-position property.

Example

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS background-position property</title>
  <style type="text/css">
    p {<!-- www . ja va 2 s.  co m-->
      background-image: url("https://www.java2s.com/style/demo/Opera.png");
      background-position: 50% center;
      background-repeat: no-repeat;
    }
    </style>
 </head>
 <body>
  <p> 
  This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
  The background image is positioned at the center of the paragraph. The background image is positioned at the center of the paragraph. The background image is positioned at the center of the paragraph. The background image is positioned at the center of the paragraph. The background image is positioned at the center of the paragraph. </p>
 </body>
</html>