CSS background-position property
CSS background-position property
Description
Sets the initial position of the element’s background-image, if specified; typically, the x, y position is given as a pair of values; the default position is 0% 0%.
Possible Values
- percent
- none
- length
- top
- center
- bottom
- left
- right
Applies to
Block-level and replaced elements
DOM Syntax
object.style.backgroundPosition = "10 30";
Example
The following example shows how to position a background image 100 pixels from the left.
<table style = "background-image:url(/https://coder-cafe.com/wp-content/uploads/2025/09/images/pattern1.gif); background-position:100px;">
<tr>
<td>
Background image positioned 100 pixels away from the left.
</td>
</tr>
</table>
The following is an example of how to position a background image 100 pixels from the left and 200 pixels from the top.
<html>
<head>
</head>
<body>
<p style = "background-image:url(https://geek-docs.com/static/https://coder-cafe.com/wp-content/uploads/2025/09/logo.png);
background-position:100px 200px;">
The background image positioned 100 pixels away from the
left and 200 pixels from the top.up
</p>
</body>
</html>
It will produce the following results –
