background-origin Archives

The CSS background-origin property defines the origin position (the background positioning area) of a background image.

Demo:

Syntax:

background-origin: padding-box|border-box|content-box;

padding-box (default) – the background image starts from the upper left corner of the padding edge.

border-box – the background image starts from the upper left corner of the border.

content-box – the background image starts from the upper left corner of the content.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#example-1 {
  border: 10px dashed black;
  padding: 25px;
  background: url(https://lenadesign.org/wp-content/uploads/2021/06/icon.png);
  background-repeat: no-repeat;
  background-origin: content-box;
}

#example-2 {
  border: 10px dashed black;
  padding: 25px;
  background: url(https://lenadesign.org/wp-content/uploads/2021/06/icon.png);
  background-repeat: no-repeat;
  background-origin: border-box;
}

#example-3 {
  border: 10px dashed black;
  padding: 25px;
  background: url(https://lenadesign.org/wp-content/uploads/2021/06/icon.png);
  background-repeat: no-repeat;
  background-origin: padding-box;
}
</style>
</head>
<body>

<h4>background-origin: content-box;</h4>
<div id="example-1">
  <p>Some text...some text...some text..some text...</p>
  <p>Some text...some text...some text..some text...</p>
</div>

<h4>background-origin: border-box;</h4>
<div id="example-2">
   <p>Some text...some text...some text..some text...</p>
  <p>Some text...some text...some text..some text...</p>
</div>

<h4>background-origin: padding-box; </h4>
<div id="example-3">
   <p>Some text...some text...some text..some text...</p>
  <p>Some text...some text...some text..some text...</p>
</div>

</body>
</html>

Output:

background-origin: content-box;

Some text…some text…some text..some text…

background-origin: border-box;

Some text…some text…some text..some text…

background-origin: padding-box;

Some text…some text…some text..some text…

Enjoy coding!