Tuesday, March 4, 2014

Background Origin in CSS

The default for background-origin is  padding-box. This means the background applies to the area containing the padding but not to the area containing the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: padding-box;
}


This sample image is scaled to fill its container and set not to repeat.

Setting the origin to border-box means that the background will now extend out under the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: border-box;
}

No comments:

Post a Comment