CSS background-origin property

Description

CSS background-origin property specifies the position of background image with respect to different components of box model i.e. we define a point where we start measuring for the background position.


We position the image to top left corner.

Syntax

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

Property values

padding-boxDefault

The background image is positioned relative to the padding box.

See the background-image is behind the padding area.

background-origin: padding-box;

border-box

The background image is positioned relative to the border box.

See the background-image is behind the border area.

background-origin: border-box;

content-box

The background image is positioned relative to the content box.

See the background-image is behind the content area only.

background-origin: content-box;

Applicable to

It applies to all elements

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 
The image may be positioned with respect to any of the box area i.e. border, padding, and area box.
▾
×

Ctrl+D