CSS background-origin property
Last Updated :
17 Apr, 2024
The background-origin property in CSS is your key to managing the background image of a webpage. It sets the origin point of the image in the background, with the default setting placing the background image origin at the upper-left corner of the screen/webpage.
Syntax:Â
background-origin: padding-box|border-box|content-box|initial|
inherit;
Property Value:Â
- initial: This takes the initial/default value of setting the background-origin to the padding edge in the upper left corner.
- padding-box: This property is used to set the origin of the background image to the padding edge in the upper left corner.Â
- border-box: This property is used to set the image to the border of the body of the webpage i.e. the absolute upper left corner.
- content-box: This property is used to set the origin of the background according to the content of the division/body wherever the property is being used.
- inherit: It is used to inherit the property from already used code (parent property) else works as padding-box by default.Â
Example: In this example, we are using the background-origin: initial property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: initial;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
Output:Â
Example: In this example, we are using the background-origin:padding-box property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: padding-box;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews &
make your upcoming placement season
efficient and successful.
</p>
</div>
</body>
</html>
Output:Â
Example: Â In this example, we are using the background-origin:border-box property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: border-box;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews & make
your upcoming placement season efficient
and successful.
</p>
</div>
</body>
</html>
Output:Â
Example: In this example, we are using the background-origin:content-box property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: content-box;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews & make
your upcoming placement season efficient
and successful.
</p>
</div>
</body>
</html>
Output:Â
Example: Â In this example, we are using the background-origin: inherit property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>background-origin property</title>
<style>
.gfg {
padding: 40px;
width: 400px;
background-image:
url(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png');
background-repeat: no-repeat;
background-origin: inherit;
border: 1px double;
text-align: justify;
}
</style>
</head>
<body>
<div class="gfg">
<p>
Prepare for the Recruitment drive of
product based companies like Microsoft,
Amazon, Adobe etc with a free online
placement preparation course. The course
focuses on various MCQ's & Coding question
likely to be asked in the interviews & make
your upcoming placement season efficient and
successful.
</p>
</div>
</body>
</html>
Output:Â
Supported Browsers: The browsers supported by CSS | background-origin property are listed below:Â
- Google Chrome
- Edge
- Internet Explorer
- Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...