CSS Background Position
CSS
This property sets the starting position of a background image.
CSS background-position property
➔ The background-position property specifies the starting position of a background image.
➔ This feature controls the initial position of an image in the background.
➔ By default, an image is positioned in the upper left corner of an element's area.
CSS background-position value
The background-position property value can be specified using multiple syntax variations and options.
➔ One value: If only one value is set, the other value will be centered by default. The first value is the x and the second value is the y axis.
background-position: left;
➔ Two value: Either two keywords will be used or a keyword and value pair will be used. The first value is the x and the second value is the y axis.
background-position: left bottom;
background-position: left 50px;
background-position: 50px top;
➔ Three value: One keyword and another keyword with offset will be used. There cannot be an offset to the center.
background-position: left 50px center;
background-position: center left 100px;
➔ Four value: Two keywords will be used, including offset. There cannot be an offset to the center.
background-position: top 50px left 100px
background-position: right 50px top 100px;
Example: CSS background-position.
Example
<!DOCTYPE html>
<html>
<head>
<meta content='charset=utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS background-position Example</title>
<style>
body {
background-image: url('resources/images/fruits-strawberry.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top 100px left 100px;
}
</style>
</head>
<body>
<h3>CSS background-position Example</h3>
<div>
<p>The background-position property specifies the starting position of a background image.
</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
Syntax
background-position: top | bottom | left | right | center | center center | 50% 50% | 50px 50px; /*etc.*/
Property values
| Value | Description |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom |
If only one keyword value is specified, the other value will be the "center" keyword value. |
| x% y% | The first value is the horizontal position and the second value is the vertical position. The upper left corner is at (0% 0%) position and it is default value. The bottom right corner is (100% 100%). If only one value is specified, the other value will be 50%. Any CSS unit is acceptable. |
| xpos ypos | The first value is the horizontal position and the second value is the vertical position. The upper left corner is at (0 0) position. If only one value is specified, the other value will be 50%. Any CSS unit is acceptable. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example (center)
body {
background-image: url('resources/images/cat-cartoon2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example (center top)
body {
background-image: url('resources/images/cat-cartoon2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}Click on the "Try it Now" button to see how it works.
Example (bottom right)
body {
background-image: url('resources/images/cat-cartoon2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}Click on the "Try it Now" button to see how it works.
Example (50% 50%)
body {
background-image: url('resources/images/dog-cartoon2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}Click on the "Try it Now" button to see how it works.
Example(100px 10px)
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background-position Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
div {
background-image: url('resources/images/animals-cat-t.png');
background-repeat: no-repeat;
background-position: 100px 10px;
min-height: 230px;
border: 2px dashed white;
border-radius: 5px;
padding: 10px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<h1>CSS background-position Example</h1>
<p>The CSS background-position is used to set the background position on the element.</p>
<p>The background-position property specifies the starting position of a background image.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.