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
CSS background-origin property
The CSS background-origin property specifies the positioning area of background images. It determines whether the background image starts from the border box, padding box, or content box of an element.
Syntax
selector {
background-origin: value;
}
Possible Values
| Value | Description |
|---|---|
padding-box |
Background starts from the padding edge (default) |
border-box |
Background starts from the border edge |
content-box |
Background starts from the content edge |
Example: Content Box Origin
The following example demonstrates the background-origin: content-box property −
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
width: 300px;
height: 200px;
border: 10px dashed #e74c3c;
padding: 20px;
background-image: url("/css/images/css-mini-logo.jpg");
background-origin: content-box;
background-repeat: no-repeat;
background-size: 100px 50px;
}
</style>
</head>
<body>
<div class="demo">
<h3>Background Origin: Content Box</h3>
<p>The background image starts from the content area, not including padding or border.</p>
</div>
</body>
</html>
A box with red dashed border and padding displays a background image that starts from the content area only, not extending into the padding or border areas.
Example: Padding Box vs Border Box
The following example compares different background-origin values −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
margin: 20px;
}
.box {
width: 200px;
height: 150px;
border: 10px solid #3498db;
padding: 15px;
background-image: linear-gradient(45deg, #f39c12, #e67e22);
background-repeat: no-repeat;
background-size: 100% 100%;
color: white;
font-weight: bold;
}
.padding-box {
background-origin: padding-box;
}
.border-box {
background-origin: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="box padding-box">
padding-box (default)
</div>
<div class="box border-box">
border-box
</div>
</div>
</body>
</html>
Two boxes side by side: the first box shows the gradient background starting from the padding area, while the second box shows the gradient extending into the border area as well.
Conclusion
The background-origin property controls where background images begin positioning. Use content-box to start from content area, padding-box for padding area (default), or border-box to include borders.
Updated on: 2026-03-15T11:45:25+05:30
213 Views
Advertisements