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 content-box Value
The CSS background-origin property with the content-box value positions the background image to start from the upper left corner of the content area, excluding padding and borders. This gives you precise control over where your background image begins.
Syntax
selector {
background-origin: content-box;
}
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: 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: 15px solid #333;
padding: 20px;
margin: 20px 0;
background: url(/css/images/logo.png);
background-repeat: no-repeat;
background-size: 100px 50px;
}
.padding-box {
background-origin: padding-box;
}
.border-box {
background-origin: border-box;
}
.content-box {
background-origin: content-box;
}
</style>
</head>
<body>
<h3>padding-box (default)</h3>
<div class="demo-box padding-box">
Background starts from padding edge
</div>
<h3>border-box</h3>
<div class="demo-box border-box">
Background starts from border edge
</div>
<h3>content-box</h3>
<div class="demo-box content-box">
Background starts from content edge
</div>
</body>
</html>
Three boxes appear with dark borders and padding. The background image positioning differs: - padding-box: Image starts from the padding area - border-box: Image starts from behind the border - content-box: Image starts from the content area only, excluding padding and border
Conclusion
The content-box value for background-origin provides the most restrictive positioning, ensuring backgrounds appear only within the actual content area. This is useful when you want backgrounds to avoid overlapping with padding or borders.
Updated on: 2026-03-15T12:34:48+05:30
267 Views
Advertisements