CSS background-origin

Please Share On:

Definition:

CSS background-origin starts from the top left corner of the element.

Property Values are:

background-origin:
padding-box;
border-box;
content-box;
Initial;
Inherit;

Syntax:

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
background-origin: initial;
background-origin: inherit;

let’s use the following image to set as a background-origin. Keep in mind that the background-origin always starts from the top left corner.

Let’s have a look in detail by applying each background-origin value.

Here is the image I am going to use in background-origin.

1) padding-box;

<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
  background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: padding-box;
}
</style>
</head>
<body>

<div id="background-origin">
<h1>Padding-box</h1>
  <p> Here is an example of background-origin with padding-box value. See clearfully the image starts from the top left corner of the padding box.</p>
</div>

</body>
</html>

Result:



2. border-box

<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
  background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed black;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: border-box;
}
</style>
</head>
<body>

<div id="background-origin">
<h1>border-box</h1>
  <p>Here is an example of background-origin with border-box value. See clearfully the image starts from the top left corner of the border box.</p>
</div>

</body>
</html>

Result:

See the above example of background-origin with border-box value. The image starts from the top left corner of the border-box.



3. Content-box

<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
  background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: content-box;
}
</style>
</head>
<body>

<div id="background-origin">
<h1>border-box</h1>
  <p>Here is an example of background-origin with content-box value. See clearfully the image starts from the top left corner of the content box.</p>
</div>

</body>
</html>

Result:

See the above example of background-origin with content-box value. The image starts from the top left corner of the content box.


4. Initial

<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
  background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: initial;
}
</style>
</head>
<body>

<div id="background-origin">
<h1>border-box</h1>
  <p>Here is an example of background-origin with initial value.</p>
</div>

</body>
</html>

Result:



5. Inherit

<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
  background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-repeat: no-repeat;
  background-origin: inherit;
}
</style>
</head>
<body>

<div id="background-origin">
<h1>border-box</h1>
  <p>Here is an example of background-origin with inherit value.</p>
</div>

</body>
</html>

Result:


Donate to support writers.



You may interest on the following topics:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial