CSS background-position property
The background-position property in CSS is used to define the initial position of a background image within an element. This property allows you to control exactly where the background image is placed, which is particularly useful when you're working with large images, logos, or when you want to achieve a specific visual layout.
Basic Usage
The basic syntax for the background-position property is:
selector {
background-position: x y;
}
x: Specifies the horizontal position.y: Specifies the vertical position.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 200px;
background-image: url('example.jpg');
background-position: center center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
In this example, the background image example.jpg is centered both horizontally and vertically within the div.
Values for background-position
1. Keywords
You can use keywords to specify the position:
left,center,rightfor horizontal positioning.top,center,bottomfor vertical positioning.
Examples:
/* Centered both horizontally and vertically */
div {
background-position: center center;
}
/* Positioned at the top-left corner */
div {
background-position: left top;
}
/* Positioned at the bottom-right corner */
div {
background-position: right bottom;
}
2. Percentage Values
You can use percentage values to position the background image relative to the element's dimensions.
0%represents the starting edge (left or top).100%represents the ending edge (right or bottom).
Example:
/* Background image starts from the top-right corner */
div {
background-position: 100% 0%;
}
3. Length Values
You can also use specific length values (e.g., px, em, rem) to precisely position the background image.
Example:
/* Background image positioned 20px from the left and 10px from the top */
div {
background-position: 20px 10px;
}
4. Combined Values
You can combine keywords with length or percentage values to achieve more specific positioning.
Example:
/* Background image 20px from the left and centered vertically */
div {
background-position: 20px center;
}
5. calc() Function
The calc() function can be used for more complex positioning, allowing you to mix units.
Example:
/* Background positioned at 50% minus 20px horizontally and 100% minus 10px vertically */
div {
background-position: calc(50% - 20px) calc(100% - 10px);
}
Practical Examples
Centering a Logo in the Header
header {
background-image: url('logo.png');
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
In this example, the logo is centered both horizontally and vertically within the header, and it scales to fit within the header without being cut off.
Positioning a Background Image in the Bottom Right Corner
div {
background-image: url('badge.png');
background-position: right bottom;
background-repeat: no-repeat;
}
Here, the badge image is positioned in the bottom-right corner of the div.
Creating a Fixed Header Background
header {
background-image: url('banner.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
}
In this example, the background image is centered, covers the entire header, and stays fixed in place as the page scrolls.
Interaction with Other Background Properties
background-size: Adjusts the size of the background image, which can affect how thebackground-positionproperty functions.background-repeat: Controls whether the image repeats, which can interact with the positioning.background-attachment: Determines whether the background scrolls with the page or remains fixed, influencing the perceived position.
Example: Combining background-position with background-size
div {
background-image: url('large-image.jpg');
background-position: top right;
background-size: 50% 50%;
background-repeat: no-repeat;
}
In this example, the background image is positioned at the top-right corner and scaled to 50% of the element's width and height.