HTML and CSS Reference
In-Depth Information
Finally,
content-box
limits the background
to the content area, inside the padding:
section {
margin: 1em;
padding: 1em;
border: 1em dashed black;
background-origin: content-box;
}
The default value for
background-clip
is
border-box
:
section {
margin: 1em;
padding: 1em;
border: 1em dashed black;
background-clip: border-box;
}
Remember that the example is scaled and
set to not repeat.
When applied to backgrounds that don't
repeat, this is indistinguishable from
pad-
ding-box
, because of the default value of
background-origin
:
section {
margin: 1em;
padding: 1em;
border: 1em dashed black;
background-clip: padding-box;
}
But if the background is allowed to
repeat, the difference becomes apparent.
A setting of
padding-box
clips the image
inside the border, but for
border-box
you
