CSS background-origin Property

CSS background-origin property specifies the origin of the background image.

By default, the background-origin property is set to padding-box. This means that the background image will start from the top left corner of the element’s padding area.

Similarly, If we set the background-origin property to content-box, the background image will start from the top left corner of the element’s content area. The same applies to border-box also.

Try out the example below for a clear understanding:

Example:

div{
  background-image: url('images/sand.jpg');
  background-repeat: no-repeat;
  background-origin: content-box;
  border: 10px dashed blue;
  padding: 30px;
}

CSS Syntax

The background-origin property has the following syntax:

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

Property Values

The background-origin property accepts the following values:

padding-boxThe background image starts from the top-left corner of the element’s padding area. This is the default value.
border-boxThe background image starts from the top-left corner of the element’s border area.
content-boxThe background image starts from the top-left corner of the element’s content area.
initialSets the background-origin property to its default value(padding-box).
inheritInherits the background-origin property from the parent element.

General Info

Default Valuepadding-box
InheritedNo
JavaScript Usageelement.style.backgroundOrigin = “content-box”

Related Pages

CSS Tutorial: CSS Background

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment