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

    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.