HTML and CSS Reference
In-Depth Information
can see the repeating image under the
border:
section {
background-clip: border-box;
background-repeat: repeat;
}
Finally,
content-box
clips the background
to the content area:
section {
margin: 1em;
padding: 1em;
border: 1em dashed black;
background-clip: content-box;
}
Note that even though the background is
clipped, the image is still sized to the
pad-
ding-box
.
Scaling backgrounds uniformly may not always produce the
effect you want. Although the sliding doors technique provides
a workaround, there's a more straightforward CSS3 approach to
achieve the same effect:
border-image
. Let's look at that next.
Selective background scaling with border images
When you're trying to create flexible layouts, you often want a back-
ground that looks the same for most of its length, but with a certain num-
ber of pixels at either end that are slightly different. This is especially
true when you want to create a rounded element with a beveled effect.
