CSS Background-Origin Property



CSS Tutorial  >  Background   >   Background-origin

The CSS background-origin property specifies where the top left corner of the background image should be located within the element. There are three possible values:

  • border-box: the top left corner of the background aligns with the top left corner of the border. This is the default value.
  • padding-box: the top left corner of the background aligns with the top left corner of the padding area.
  • content-box: the top left corner of the background aligns with the top left corner of the content area.

The picture below shows where the top left corner of the background image is located for each background-origin value.

CSS Background-Origin Property Description

Below we show an example for each possible value.

Example 1: Background-origin: border-box

CSS Declaration

border: solid rgba(128,128,128,0.5) 25px;
padding: 25px;
background-image: url(cute-snowmen.jpg);
background-size: 500px;
background-repeat: no-repeat;
background-origin: border-box;

Result:

In Example 1, the background image fills the entire element, including the border area. The border area has been set to be opaque so you can see the presence of the image in the border area.

Example 2: Background-origin: padding-box

CSS Declaration

border: solid rgba(128,128,128,0.5) 25px;
padding: 25px;
background-image: url(cute-snowmen.jpg);
background-size: 500px;
background-repeat: no-repeat;
background-origin: padding-box;

Result:

In Example 2, the top left corner of the background image aligns with the top left corner of the padding area.

Example 3: Background-origin: content-box

CSS Declaration

border: solid rgba(128,128,128,0.5) 25px;
padding: 25px;
background-image: url(cute-snowmen.jpg);
background-size: 500px;
background-repeat: no-repeat;
background-origin: content-box;

Result:

In Example 3, the top left corner of the background image aligns with the top left corner of the content area.

Next: CSS Gradient




Copyright © 2024   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact

AdBlock Detected!

Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.