background

UK[?b?kgra?nd] US[?b?k?ɡra?nd]

n. (painting, etc.) background; background color; background information; soundtrack

Plural: backgrounds

position

## English[p??z??n] US[p??z???n]

n. Position, direction; status, position; attitude; State

vt. Place; put... in the appropriate position; position...; station the army

Third person singular: positions Plural: positions Present participle: positioning Past tense: positioned Past participle: positioned

css background-position property syntax

How to use the background-position attribute?

The background-position property can set the starting position of the background image. The syntax is: background-position: x y, where x represents the horizontal position and y represents the vertical position; there are many ways to assign values ??to x and y, for example: top left, 3% 2%, xpos ypos.

Function: Set the starting position of the background image.

Description: This attribute sets the position of the original background image (defined by background-image). If the background image is to be repeated, it will start from this point.

Note: You need to set the background-attachment property to "fixed" to ensure that this property works properly in Firefox and Opera.

Values ??that can be set:

##xpos ypos

css background-position property example

<html>
<head>
<style type="text/css">
body
{ 
  background-image:url('http://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>
</head>

<body>
<body>
<p><b>提示：</b>您需要把 background-attachment 屬性設(shè)置為 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</html>

Run instance ?

Click the "Run instance" button to view the online instance

    <thead id="rntpp"><output id="rntpp"><ruby id="rntpp"></ruby></output></thead>
      ValueDescription
      top left
      top center
      top right
      center left
      center center
      center right
       
      bottom left
      bottom center
      bottom right
      If you specify only one keyword, the second value will be " center". 
      Default value: 0% 0%. 
      x% y%
      The first value is the horizontal position and the second value is the vertical position. 
      The upper left corner is 0% 0%. The lower right corner is 100% 100%. 
      If you specify only one value, the other value will be 50%. 

      The first value is the horizontal position, the second value is the vertical position . 
      The upper left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit. 
      If you specify only one value, the other value will be 50%. 
      You can mix % and position values.