background-origin - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-origin

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-origin

Description

The background-origin CSS property specifies the positioning area of the background, that is the position of the origin of an image specified using the background-image property.

The following table summarizes the usages context and the version history of this property.

Item Value
Default value: padding-box
Applies to:All elements. It also applies to ::first-letter and ::first-line.
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 

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

The background-origin property is ignored if background-attachment is 'fixed'.

Property Values

The following table describes the values of this property.

Value Description
border-box background extends to the outside edge of the border. Background is drawn below the border.
padding-box Default value. background extends to the outside edge of the padding. No background is drawn below the border.
content-box background is clipped to the content box only. No background is drawn below the border and padding area.
initial Sets this property to its default value.
inherit take the value of its parent element background-origin property.

The example below shows the background-origin property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Example of Setting background-origin of an Element</title>
  <style type="text/css">
  .box {<!--  w  w w.j  av  a 2  s . c  om-->
    width: 250px;
    height: 150px;
        padding: 10px;
        border: 6px dashed #333;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    background-size: contain;
        background-origin: content-box;
  }
</style>
 </head>
 <body>
  <div class="box"></div>
 </body>
</html>

Related Tutorials