BlogsDope image BlogsDope

CSS background-origin

Aug. 8, 2018 CSS HTML BACKGROUND 238
Download Our App.
BlogsDope App
Get it on Google Play

The background-origin property sets the background positioning area of an element. In other words, it specifies the original position (of top left corner) of the background image of an element.

CSS

background-origin: value;

The background can be positioned relative to content boxpadding box or border box. To understand what constitutes these boxes, have a look at what a CSS box model looks like

CSS Box Model

The box model of an element contains four boxes - content box, padding box, border box and margin.

box model

Content box contains all the content like text, images, tables, of the element.

Padding box consists of the content box along with padding. Padding is the area around the content of the element that separates it from the border. Any background color or image set to the element extends to the padding area also.

Border box consists of the padding box along with borders.

Lastly, the margin area is an empty area that surrounds the border area. It is used to separate the element from other elements which are its neighbours. The larger the margin, more is the distance of the element from its neighbours.

Values

padding-box : Background image origin (its top left corner) is at the top left corner of the padding box. This is the default value.

content-box : Background image origin (its top left corner) is at the top left corner of the content box.

border-box : Background image origin (its top left corner) is at the top left corner of the border box.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Example

See the Pen background-origin examples by Aakhya Singh (@aakhya) on CodePen.

The above demo shows the background image origin for different values of the background-origin property.

Giving different values for different background images

If you want to set different origins for different background images of an element, then you need to give multiple comma-separated values to the background-origin property.

The first value (before first comma) sets the origin of the first background image, the second value for the second image, and so on. If only one value is given, then it will set the origin of all the background images of the element.

HTML

<div></div>

CSS

div {
    width: 300px;
    height: 152px;
    background-image: url('trees.png'), url('forest.jpg');
    background-repeat: no-repeat;
    background-origin: content-box, border-box;
}

In the above example, the first value content-box sets the origin of the first background image 'trees.png' at the top left corner of the content box, whereas the second value border-box sets the origin of the second background image 'forest.jpg' at the top left corner of the border box.

The demo for this example is shown below.

See the Pen background-origin values for different background images by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in all modern browsers. Multiple background images are not supported in IE8 and earlier versions.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).