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;

Try it

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;

Try it

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;

Try it

Applicable to

It applies to all elements

Preview

Code

CSS

.parent{
width:150px;
height:150px;
border:10px solid black;
padding:20px;
background-image: url(img/web4college.png);
background-repeat:no-repeat;
background-position:top left;
}

HTML

<div class="parent">
 The image may be positioned with respect to any of the box area i.e. border, padding, and area box.
 </div>

CSS3 Properties

Description

Syntax

Property values

Applicable to