Search within TutorialsPark

CSS background-origin Property


To specify the point at which the background-image will be drawn


Definition and Notes.

1. The CSS background-origin property is used to instruct the browser where to place the background image relative to the border, padding and content of an element.

2. Its useful when the image is nonrepeating, allowing you to control the position of the image.


Syntax:

CSS background-origin property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- The browser will draw background image or color within the defined box(border, padding, content)

Attributes

Value Description
border-box The background color and image are drawn within the border-box
padding-box The background color and image are drawn within the padding box.
content-box The background color and image are drawn within the content box.

Specifications

Specs Value
Name background-origin
Value border-box| padding-box| content-box
Initial Value border-box
Applies to all elements.
Javascript syntax object.style.backgroundOrigin="padding-box"
Inherited No
Browser Support internetexplorer safari firefox opera chrome

Related Examples.