css background-position property


  Translation results：

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 propertysyntax

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 propertyexample

<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 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</html>

Run instance »

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

Popular Recommendations

Home

Videos

Q&A

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.