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 padding-box Value
The CSS background-origin property with the padding-box value positions the background image starting from the upper left corner of the padding area. This means the background extends through the padding but not into the border area.
Syntax
selector {
background-origin: padding-box;
}
Possible Values
| Value | Description |
|---|---|
padding-box |
Background starts from the padding edge (default value) |
border-box |
Background starts from the border edge |
content-box |
Background starts from the content edge |
Example: Comparing Background Origin Values
The following example demonstrates the difference between padding-box, border-box, and content-box values −
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
width: 300px;
height: 150px;
border: 10px solid #333;
padding: 20px;
margin: 20px 0;
background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background-repeat: no-repeat;
background-size: 100px 100px;
color: white;
font-weight: bold;
}
.padding-box {
background-origin: padding-box;
}
.border-box {
background-origin: border-box;
}
.content-box {
background-origin: content-box;
}
</style>
</head>
<body>
<div class="demo-box padding-box">
<h3>padding-box</h3>
<p>Background starts from padding edge</p>
</div>
<div class="demo-box border-box">
<h3>border-box</h3>
<p>Background starts from border edge</p>
</div>
<div class="demo-box content-box">
<h3>content-box</h3>
<p>Background starts from content edge</p>
</div>
</body>
</html>
Three boxes appear with different background positioning: - padding-box: Gradient starts from the padding area - border-box: Gradient starts from behind the border - content-box: Gradient starts from the content area only
Conclusion
The padding-box value for background-origin is the default behavior, positioning backgrounds to start from the padding edge. Use border-box to include borders or content-box to exclude padding from the background area.
Updated on: 2026-03-15T12:33:39+05:30
303 Views
Advertisements