CSS background-origin Property

CSS background-origin Property


CSS background-origin Property
The background-origin property specifies where the background image is positioned. 
Note: If the background-attachment property is set to fixed, this property has no effect. 
Default value: padding-box
Syntax - 
background-origin: padding-box|border-box|content-box|initial|inherit;
 
Now we will see the the possible values - 
  • padding-box - The position is relative to the padding box 
  • border-box - The position is relative to the border box 
  • content-box - The position is relative to the content box 
  • Initial
  • inherit 
Now we will see Example -
Example -

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    .example {
        width: 300px;
        border: 20px solid black;
        padding: 50px;
        background: url(images.png);
        background-repeat: no-repeat;
    }

    .example1 {}

    .example2 {
        background-origin: border-box;
    }

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

<body>
    <p>No background-origin (padding-box is default):</p>
    <div class="example example1">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
            tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
            aliquip ex ea commodo consequat.</p>
    </div>
    <p>background-origin: border-box:</p>
    <div class="example example2">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
            tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
            aliquip ex ea commodo consequat.</p>
    </div>
    <p>background-origin: content-box:</p>
    <div class="example example3">
        <h2>Lorem Ipsum Dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
            tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
            aliquip ex ea commodo consequat.</p>
    </div>

</body>

</html>
Output -