关于Object.style.backgroundPosition

尚嘉勋

2023-12-01

SOURCE：http://www.w3schools.com/jsref/prop_style_backgroundposition.asp

Definition and Usage

The backgroundPosition property sets or returns the position of a background-image within an element.

Syntax

Set the backgroundPosition property:

Object.style.backgroundPosition="position"

Return the backgroundPosition property:

Object.style.backgroundPosition

Tip: The default value for the backgroundPosition property is: 0% 0%.

Value	Description
top left top center top right center left center center center right bottom left bottom center bottom right	If you only specify one keyword, the other value will be "center".
x% y%	The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos	The x value indicates the horizontal position and the y value indicates the vertical position. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and units
inherit	The setting of the background-position property is inherited from the parent element

Example

Change the position of the background-image:

<html>
<head>
<style>
div
{
background-image: url('img_tree.png');
background-repeat: no-repeat;
width: 400px;
height: 400px;
border: 1px solid #000000;
}
</style>
<script type="text/javascript">
function displayResult()
{
document.getElementById("div1").style.backgroundPosition="center bottom";
}
</script>
</head>
<body>

<button type="button" οnclick="displayResult()">Position background image</button>
<br />
<div id="div1">
</div>

</body>
</html>

关于Object.style.backgroundPosition

Definition and Usage

Syntax

Example

Example

相关阅读

相关文章

相关问答

相关文档