Please enable Javascript for better experience...
Background-Clip and Background-Origin in CSS
By Big | Mar 27, 2016 | In Articles | Total Views [ 133 ]
Taged In
(0 Like)
Rate

Background-origin and background-clip property is nearly same but has little difference.

Introduction

In below sections, we will see the difference between background-origin and background-clip. Both properties have three options: border-box, padding-box, and content-box. The background-origin property determines where the background is placed. While the background-clip determines what part of the background is shown. The properties can be used together or independently.

Default attribute

01

Attribute: border-box

02

Attribute: padding-box

03

Attribute: content-box

04

Let's see the full example

<html>
<head>

<style>
    div{
        background-image: url(bimg.png);
        display: inline-block;
        width: 500px;
        height: 250px;
        color: #fcfa05;
        padding: 20px;
        border: 10px dashed #333;
        font-size: 2em;
        font-weight: bold;
        margin: 0 0 20px 20px;
    }
    div span{
    font-size: 1em;
    color: #fff;
    }
</style>
</head>
<body>
<h1>Below you can see the comparison between Background-Origin and Background-Clip based on their attributes.</h1>
    <h2>Default behaviour</h2>
    <div>
        Background-Origin<br/>
        <span>Default behaviour is border-box</span>
    </div>
    <div>
        Background-Clip<br/>
        <span>Default behaviour is border-box</span>
    </div>
    <h2>Attribute: border-box</h2>
    <div style="background-origin: border-box; background-repeat: no-repeat;">
        
        background-origin : border-box<br/>
        <span>Border is overlapping image</span>
    </div>
    <div style="background-clip: border-box;">
        
        background-clip : border-box<br/>
        <span>Border is overlapping image</span>
    </div>
    
    <h2>Attribute: padding-box</h2>
    <div style="background-origin: padding-box; background-repeat: no-repeat;">
        
        background-origin : padding-box
        <br/>
        <span>See the side corners. Image has padding in left but not in right side.</span>
    </div>
    <div style="background-clip: padding-box;">
        
        background-clip : padding-box
        <br/>
        <span>See the side corners. Both side has equal padding. Border is not overlapping image.</span>
    </div>
    
    <h2>Attribute: content-box</h2>
    <div style="background-origin: content-box; background-repeat: no-repeat;">
        
        background-origin : content-box
        <br/>
        <span>Image is shifted toward content but at the right corner, image and border is overlapping each other.</span>
    </div>
    <div style="background-clip: content-box;">
        
        background-clip : content-box<br/>
        <span>Image and border has equal space at all corners and image has shifted toward content.</span>
    </div>
    
    
    
        
</body>
</html>

Hope it helps you. You can download the working example also.

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

User's Comments


 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment