CSS background-origin property
The background-origin property in CSS determines the position of the background image relative to the element's box model. It specifies where the background image is positioned relative to the element's padding, border, or content area. This property is essential for fine-tuning how background images appear and align within an element.
Basic Usage
The basic syntax for the background-origin property is:
selector {
background-origin: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.example {
width: 300px;
height: 200px;
background-image: url('example.jpg');
background-origin: border-box;
background-size: cover;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>
In this example, the background image example.jpg is positioned relative to the border box of the div.
Values for background-origin
1. border-box
- Description: The background image is positioned relative to the border box of the element. This includes the content area, padding, and border.
- Use Case: This value is useful when you want the background image to cover the entire area of the element, including the border.
div {
background-origin: border-box;
}
2. padding-box
- Description: The background image is positioned relative to the padding box of the element. This includes the content area and padding but excludes the border.
- Use Case: Useful when you want the background image to be visible only within the padding area, without extending into the border.
div {
background-origin: padding-box;
}
3. content-box
- Description: The background image is positioned relative to the content box of the element, excluding padding and borders.
- Use Case: Useful when you want the background image to cover only the content area, not the padding or border.
div {
background-origin: content-box;
}
Practical Examples
Example 1: Background Positioned Relative to Border Box
<!DOCTYPE html>
<html>
<head>
<style>
.border-box-example {
width: 300px;
height: 200px;
background-image: url('background.jpg');
background-origin: border-box;
background-size: cover;
border: 10px solid black;
}
</style>
</head>
<body>
<div class="border-box-example"></div>
</body>
</html>
In this example, the background image will be positioned relative to the entire border box, so it includes the border area.
Example 2: Background Positioned Relative to Padding Box
<!DOCTYPE html>
<html>
<head>
<style>
.padding-box-example {
width: 300px;
height: 200px;
background-image: url('background.jpg');
background-origin: padding-box;
background-size: cover;
padding: 20px;
border: 10px solid black;
}
</style>
</head>
<body>
<div class="padding-box-example"></div>
</body>
</html>
Here, the background image will be positioned relative to the padding area, so it does not extend into the border area.
Example 3: Background Positioned Relative to Content Box
<!DOCTYPE html>
<html>
<head>
<style>
.content-box-example {
width: 300px;
height: 200px;
background-image: url('background.jpg');
background-origin: content-box;
background-size: cover;
padding: 20px;
border: 10px solid black;
}
</style>
</head>
<body>
<div class="content-box-example"></div>
</body>
</html>
In this example, the background image will be positioned relative to the content area only, excluding both the padding and border areas.
Interaction with Other Background Properties
background-clip: Defines how the background is clipped (border-box, padding-box, content-box), which works together withbackground-originto control the visible area of the background.background-size: Adjusts the size of the background image, which affects how the image is positioned relative to the origin.background-position: Determines the initial position of the background image within the defined origin area.
Example: Combining background-origin with background-position
div {
background-image: url('example.jpg');
background-origin: padding-box;
background-position: center top;
}
In this example, the background image is positioned relative to the padding box and centered horizontally with the top edge aligned with the top of the padding area.