Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS3 background properties in relation with Box Model

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 258
    Comment on it

    The CSS Box Model

    In CSS, the term "box model" means considering all the HTML elements as boxes. It can be supposed as base of page layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

    The image below illustrates the box model: Free Web Proxy

    Following two CSS3 Properties can be related to box model.

    1. background-clip
    2. background-origin

    1. Background-Clip

    It specifies the painting area of the background.

    Consider following three CSS IDs:

    #div1
    {
    padding:15px;
    border:5px dotted #000000;
    background-color:yellow;
    width:150px;
    height:150px;    
    background-clip:content-box;
    }
    
    #div2
    {
    padding:15px;
    border:5px dotted #000000;
    background-color:yellow;
    width:150px;
    height:150px;    
    background-clip:padding-box;
    }
    #div3
    {
    padding:15px;
    border:5px dotted #000000;
    background-color:yellow;
    width:150px;
    height:150px;    
    background-clip:border-box;
    }
    

    Output:
    Free Web Proxy

    There are three separate values that can be assigned to background-clip. These are:

    Free Web Proxy


    2. Background-Origin

    The background-origin property specifies what the background-position property should be relative to. Similar to background-clip property, background-origin also have three values. Free Web Proxy

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: