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

    <tfoot id="gueus"></tfoot>
    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. 
    						
											
				

				
			

		
	





















  • <table id="gueus"></table>