Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Set the Background Image Position with CSS
To set the background image position, use the background-position property. This CSS property controls where the background image is positioned within its container element.
Syntax
background-position: horizontal vertical;
The property accepts various values including pixels, percentages, and keywords like left, right, center, top, and bottom.
Example: Positioning with Pixels
This example sets the background image position 80 pixels from the left and centers it vertically:
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position: 80px center;
background-repeat: no-repeat;
height: 100vh;
}
</style>
</head>
<body>
<p>Tutorials Point</p>
</body>
</html>
Common Position Values
| Value | Description | Example |
|---|---|---|
left top |
Top-left corner | background-position: left top; |
center center |
Centered horizontally and vertically | background-position: center; |
right bottom |
Bottom-right corner | background-position: right bottom; |
50px 100px |
50px from left, 100px from top | background-position: 50px 100px; |
Multiple Positioning Examples
<html>
<head>
<style>
.example1 {
background-image: url("/css/images/css.jpg");
background-position: center top;
background-repeat: no-repeat;
height: 200px;
border: 2px solid #ccc;
margin: 10px 0;
}
.example2 {
background-image: url("/css/images/css.jpg");
background-position: 25% 75%;
background-repeat: no-repeat;
height: 200px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div class="example1">Center Top Position</div>
<div class="example2">25% 75% Position</div>
</body>
</html>
Conclusion
The background-position property provides precise control over background image placement using keywords, percentages, or pixel values. Use it with background-repeat: no-repeat for better positioning control.
Updated on: 2026-03-15T23:18:59+05:30
618 Views
Advertisements