CSS - background-origin Property

Quiz

CSS background-origin property is used to set the origin of the background, which could be from the start of the border, inside the border or inside the padding.

Syntax

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

Property Values

Value	Description
padding-box	The background image starts from the upper left corner of the padding edge.This is the default value.
border-box	The background image starts from the upper left corner of the border.
content-box	The background image starts from the upper left corner of the content.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS Background Origin

Below are decribed some examples of background-origin property using different values.

Upper Left Corner of Padding Edge

To make the background image start from the upper left corner of the padding edge, we use the padding-box value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 10px rgb(13, 7, 190);
            border-style: dashed;
            margin: 5px;
            padding: 1cm;
            font: 700 1em sans-serif;
            color: aliceblue;
            display: inline-block;
            background-image: url('/css/images/yellow-flower.jpg');
            height: 200px;
            width: 200px;
        }

        .padding-box {
            background-origin: padding-box;
        }
    </style>
</head>

<body>
    <h2>CSS Background-origin Property</h2>
    <div class="padding-box">background origin padding-box</div>

</body>

</html>

Upper Left Corner of Border

To make the background image start from the upper left corner of the border, we use the border-box value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 10px rgb(13, 7, 190);
            border-style: dashed;
            margin: 5px;
            padding: 1cm;
            font: 700 1em sans-serif;
            color: aliceblue;
            display: inline-block;
            background-image: url('/css/images/yellow-flower.jpg');
            height: 200px;
            width: 200px;
        }

        .border-box {
            background-origin: border-box;
        }
    </style>
</head>

<body>
    <h2>CSS Background-origin Property</h2>
    <div class="border-box">background origin border-box</div>

</body>

</html>

Upper Left Corner of Content

To make the background image start from the upper left corner of the content, we use the content-box value.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        div {
            border: 10px rgb(13, 7, 190);
            border-style: dashed;
            margin: 5px;
            padding: 1cm;
            font: 700 1em sans-serif;
            color: aliceblue;
            display: inline-block;
            background-image: url('/css/images/yellow-flower.jpg');
            height: 200px;
            width: 200px;
        }

        .content-box {
            background-origin: content-box;
        }
    </style>
</head>

<body>
    <h2>CSS Background-origin Property</h2>
    <div class="content-box">background origin content-box</div>

</body>

</html>

Supported Browsers

Property
background-origin	4.0	9.0	4.0	3.0	10.5

css_reference.htm

Print Page