Demo: Background Origin
Padding Box
Border Box
Content Box
<div class='example'> <div id='padding-box'> Padding Box </div> <div id='border-box'> Border Box </div> <div id='content-box'> Content Box </div> </div>
.example #padding-box Padding Box #border-box Border Box #content-box Content Box
@import "compass/css3"; .example { padding: 2em; div { background: { image: image-url("examples/css3/bg-origin/bg.png"); repeat: repeat; position: top left; }; border: 10px solid rgba(255, 0, 0, 0.5); color: white; @include text-shadow(darken(blue, 50%) 2px 2px); padding: 1em; text-align: center; margin-bottom: 2em; } #padding-box { @include background-origin(padding-box); } #border-box { @include background-origin(border-box); } #content-box { @include background-origin(content-box); } }
@import compass/css3 .example padding: 2em div background: image: image-url("examples/css3/bg-origin/bg.png") repeat: repeat position: top left border: 10px solid rgba(255, 0, 0, 0.5) color: white +text-shadow(darken(blue, 50%) 2px 2px) padding: 1em text-align: center margin-bottom: 2em #padding-box +background-origin(padding-box) #border-box +background-origin(border-box) #content-box +background-origin(content-box)
.example { padding: 2em; } .example div { background-image: url('/images/examples/css3/bg-origin/bg.png?1408149819'); background-repeat: repeat; background-position: top left; border: 10px solid rgba(255, 0, 0, 0.5); color: white; text-shadow: black 2px 2px; padding: 1em; text-align: center; margin-bottom: 2em; } .example #padding-box { -moz-background-origin: padding; -o-background-origin: padding-box; -webkit-background-origin: padding; background-origin: padding-box; } .example #border-box { -moz-background-origin: border; -o-background-origin: border-box; -webkit-background-origin: border; background-origin: border-box; } .example #content-box { -moz-background-origin: content; -o-background-origin: content-box; -webkit-background-origin: content; background-origin: content-box; }