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

Run instance »

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

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved

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.